我有自定义页面模板，表单有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();
}
$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);
}
});
});
});
答案 0 :(得分：1)
请勿在ajax电话上提交表单。你可以这样使用。
jQuery('#filterbymall').change(function(){
jQuery('#filterbystore').prop('selectedIndex','Select by Store');
ajaxSubmit();
});
jQuery('#filterbystore').change(function(){
jQuery('#filterbystreet').prop('selectedIndex','Select by');
ajaxSubmit();
});
function ajaxSubmit(){
var myform= jQuery("'#myform").serialize();
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: myform,
success:function(data){
jQuery(".records").html(data);
}
});
return false;
}
并更改此
<input type="submit" value="List all partner stores" class="pos-submit"/>
到
<input type="button" value="List all partner stores" class="pos-submit"/>
输入类型提交到按钮
答案 1 :(得分：0)
请按照以下步骤操作：
$('#ID_OF_DIV').click(function(){
var admin_ajax_url = $('#admin_ajax_url').val();
$.post(
admin_ajax_url,
{
'action': 'select_options',
'name1': value1,
'name2': value2,
.... so on,
},
function(output){
//output will be the response from the ajax code code.
});
});
add_action( 'wp_ajax_select_options', 'my_action_callback' );
add_action( 'wp_ajax_nopriv_select_options', 'my_action_callback' );