【发布时间】：2016-11-28 03:20:40
【问题描述】：
我有一个带有 2 个下拉列表和 1 个输入提交的表单的自定义页面模板。当用户提交表单时，将显示结果，这是正常的。但是我有一个问题，在获取数据库中的数据时浏览器会重新加载。
我想使用 AJAX 来防止重新加载页面。我看到了一些关于 Ajax WordPress 的文章，但我无法正常工作。
谁能帮帮我？如何使用 AJAX？如何在 AJAX 中调用自定义 PHP 文件？
AJAX (functions.php)
function ajax_enqueue_sl(){
wp_enqueue_script('ajax_load_sl', get_template_directory_uri().'/js/alternate-dropdown.js', array('jquery'));
wp_localize_script('ajax_load_sl', 'ajax_object', array('ajax_url' => admin_url( 'admin-ajax.php')));
}
add_action('wp_enqueue_scripts', ajax_enqueue_sl);
add_action('init', 'registerFormAction');
function registerFormAction(){
// To handle the form data we will have to register ajax action.
add_action('wp_ajax_nopriv_submitAjaxForm','submitAjaxForm_callback');
add_action('wp_ajax_submitAjaxForm','submitAjaxForm_callback');
}
function submitAjaxForm_callback(){
global $wpdb;
if(is_page(9208)){
//ROCK ON!
if (isset($_POST['store_list']) && $_POST['store_list'] != 'Select by Store'){
$store_list = $_POST['store_list'];
$stores= $wpdb->get_results($wpdb->prepare("SELECT street FROM tablename WHERE stores= '" . $store_list . "' AND col IN ('test') ORDER BY street ASC", OBJECT));
foreach ($stores as $record_s){
echo '<div class="records">';
echo '<div><span class="icons-tabbed-store icon-icon-stores">' . $record_s->street . '</span></div>';
echo '</div>';
}
} elseif (isset($_POST['mall_list']) && $_POST['mall_list'] != 'Select by Mall'){
$mall_list = $_POST['mall_list'];
$street = $wpdb->get_results($wpdb->prepare("SELECT stores FROM tablename WHERE street= '" . $street_list . "' AND col IN ('test') ORDER BY stores ASC", OBJECT));
foreach ($street as $record_m){
echo '<div class="records">';
echo '<div><span class="icons-tabbed-store icon-icon-stores">' . $record_m->stores . '</span></div>';
echo '</div>';
}
}
}
wp_die();
}
带 HTML 的 PHP (test.php)
$results_street = $wpdb->get_results('SELECT DISTINCT street FROM tablename WHERE code IN ("test1") ORDER BY street ASC', OBJECT);
$results_stores = $wpdb->get_results('SELECT DISTINCT stores FROM tablename WHERE code IN ("test2") ORDER BY stores ASC', OBJECT);
<form action='' method='post' name='myform' id="myform">
<div class="pos-div">
<select name="street_list" id="filterbystreet">
<option name="default" class="filter_by" value="Select by">Select by</option>
<?php
foreach($results_street as $option){
if(isset($_POST['street_list']) && $_POST['street_list'] == $option->street)
echo '<option name="street_list" class="filter_by" selected value="'. $option->street .'">'. $option->street .'</option>';
else
echo '<option name="street_list" class="filter_by" value="'. $option->street .'">'. $option->street .'</option>';
};
?>
</select>
</div>
<span class="or">or</span>
<div class="pos-div">
<select name="store_list" id="filterby">
<option name="default" class="filter_by" value="Select by">Select by</option>
<?php
foreach($results_stores as $option){
if(isset($_POST['store_list']) && $_POST['store_list'] == $option->stores)
echo '<option name="store_list" class="filter_by" selected value="'. $option->stores .'">'. $option->stores .'</option>';
else
echo '<option name="store_list" class="filter_by" value="'. $option->stores .'">'. $option->stores .'</option>';
};
?>
</select>
</div>
<input type="submit" value="List all partner stores" class="pos-submit"/>
</form>
if (isset($_POST['store_list']) && $_POST['store_list'] != 'Select by Store'){
$store_list = $_POST['store_list'];
$stores= $wpdb->get_results($wpdb->prepare("SELECT street FROM tablename WHERE stores= '" . $store_list . "' AND code IN ('test3') ORDER BY street ASC", OBJECT));
foreach ($stores as $record_s){
echo '<div class="records">';
echo '<div><span>' . $record_s->street. '</span></div>';
echo '</div>';
}
} elseif (isset($_POST['street_list']) && $_POST['street_list'] != 'Select by'){
$street_list = $_POST['street_list'];
$streets = $wpdb->get_results($wpdb->prepare("SELECT street FROM tablename WHERE street_list= '" . $street_list. "' AND code IN ('test3') ORDER BY stores ASC", OBJECT));
foreach ($streets as $record_m){
echo '<div class="records">';
echo '<div><span>' . $record_m->stores . '</span></div>';
echo '</div>';
}
}
ajax_js.js
jQuery(document).ready(function($){
//$('#myform').submit(ajaxFormSubmit);
$('#filterbystreet').change(function(){
$('#filterbystore').prop('selectedIndex','Select by Store');
});
$('#filterbystore').change(function(){
$('#filterbystreet').prop('selectedIndex','Select by');
});
jQuery('.pos-submit').on('click',function(e){
e.preventDefault();
var myform = jQuery('#myform').serialize();
jQuery.ajax({
type:"POST",
// Get the admin ajax url which we have passed through wp_localize_script().
url: ajax_object.ajax_url,
action: "submitAjaxForm",
data: myform,
success:function(data){
jQuery(".records").html(data);
console.log(data);
}
});
});
});
【问题讨论】：
-
我注意到您使用的是 jQuery，您是否包含 jQuery 库？
-
@Ronald，是的，jquery 库已经包含在里面了
-
请使用this answer作为参考如何使用ajax调用。
admin-ajax.php不应该这样调用，你应该在点击或选择事件时preventDefault()... -
@dingo_d，请查看我更新的 pos 以及更新的 js 和 ajax 函数。即使在 console.log 中也不会显示结果
-
您是否在控制台中看到了 ajax 调用（在 XHR 请求中查看 Network 选项卡）？