使用AJAX返回搜索表单结果

时间:2015-05-29 作者:andrewdcato

我试图从搜索表单中获取用户输入,根据用户输入构建查询,然后使用AJAX返回相关帖子。

现在,表单构建select 正确下拉列表。表单内容在提交时消失,加载动画出现,然后显示结果。我遇到的问题是返回的实际结果-无论我做什么(即使是简单的echo: \'Success\'; 不起作用),我得到0 作为我的回报。

表单代码:

<form class="form-horizontal" id="product_search_form" name="product_search_form" method="post">
  <div id="product_search_form_content">
    <div class="form-group">
        <label for="inputCarrierSelect" class="col-sm-2 control-label">Carrier</label>
        <div class="col-sm-10">
            <?php sms_populate_carrier_dropdown(); ?>
        </div>
    </div>
    <div class="form-group">
        <label for="inputStateSelect" class="col-sm-2 control-label">State</label>
        <div class="col-sm-10">
            <?php sms_populate_state_dropdown(); ?>
        </div>
        <input type="hidden" name="prdlnSelect" value="<?php echo $pl_slug; ?>" />
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input class="btn btn-primary" id="submit_button" onclick="product_search();" type="button" value="Search" />
        </div>
    </div>
  </div>
</form>
jQuery:

function product_search(){
  jQuery.ajax({
    data: jQuery(\'#product_search_form\').serialize(),
    type: jQuery(\'#product_search_form\').attr(\'method\'),
    url:  the_ajax_productSearch.ajaxurl_productSearch,
    beforeSend: function(){
      jQuery(\'#product_search_form_content\').remove();
      jQuery(\'#product_search_form\').append(\'<div class="alert alert-success" role="alert" align="center"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading...</div>\');
    },

    success: function(response) { // on success..
      jQuery(\'#product_search_form\').html(response);
    },
  });
  return false; // cancel original event to prevent form submitting
}
从我的主题functions.php 文件:

wp_register_script( \'ajax-productSearch\', get_template_directory_uri() .\'/js/ajax-product-search.js\', array( \'jquery\') );
wp_enqueue_script( \'ajax-productSearch\' );
wp_localize_script( \'ajax-productSearch\',\'the_ajax_productSearch\', array(\'ajaxurl_productSearch\' => admin_url(\'admin-ajax.php\')));

add_action( \'wp_ajax_productSearch\', \'ajax_action_productSearch\' );
add_action( \'wp_ajax_nopriv_productSearch\', \'ajax_action_productSearch\' );

function ajax_action_productSearch(){
  echo \'Success\';
  die();
}
有没有什么明显的迹象表明我做错了?

1 个回复
最合适的回答,由SO网友:sakibmoon 整理而成

代码中有两个问题

您需要添加脚本wp_enqueue_scripts 像这样的钩子-

add_action(\'wp_enqueue_scripts\', \'my_custom_js_script\');

function my_custom_js_script() {
    wp_register_script( \'ajax-productSearch\', get_template_directory_uri() .\'/js/ajax-product-search.js\', array( \'jquery\') );
    wp_enqueue_script( \'ajax-productSearch\' );
    wp_localize_script( \'ajax-productSearch\',\'the_ajax_productSearch\', array(\'ajaxurl_productSearch\' => admin_url(\'admin-ajax.php\')));
}
第二个问题是,您需要添加action 您的jQuery.ajax 数据如果你的钩子wp_ajax_my_ajax_hook, 此参数的值为my_ajax_hook. 就你而言productSearch. 更改您的product_search 此函数-

function product_search(){
  jQuery.ajax({
    data: { action: \'productSearch\', formData: jQuery(\'#product_search_form\').serialize() },
    type: jQuery(\'#product_search_form\').attr(\'method\'),
    url:  the_ajax_productSearch.ajaxurl_productSearch,
    beforeSend: function(){
      jQuery(\'#product_search_form_content\').remove();
      jQuery(\'#product_search_form\').append(\'<div class="alert alert-success" role="alert" align="center"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading...</div>\');
    },

    success: function(response) { // on success..
      jQuery(\'#product_search_form\').html(response);
    },
  });
  return false; // cancel original event to prevent form submitting
}

结束