我试图从搜索表单中获取用户输入,根据用户输入构建查询,然后使用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();
}
有没有什么明显的迹象表明我做错了?
最合适的回答,由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
}