我对ajax缺乏经验。我正在构建一个表单，允许用户从返回帖子ID值的第一个字段中获取自定义帖子类型。然后，我希望ajax获取该帖子ID，并基于该帖子的一些自定义字段构建第二个下拉列表。
以下是我到目前为止所掌握的内容，改编自关于这个问题的第一个答案：Filter a second dropdown list when a value is chosen in the first one
在函数中。php：
if ( is_admin() ) {
add_action( \'wp_ajax_dynamic_dropdown\', \'dynamic_dropdown_func\' );
add_action( \'wp_ajax_nopriv_dynamic_dropdown\', \'dynamic_dropdown_func\' );
}
function dynamic_dropdown_func () {
global $wpdb;
if (isset($_POST[\'event\'])) {
$event_id = $_POST[\'event\'];
$first = get_field(\'first_day\',$event_id);
$last = get_field(\'last_day\',$event_id);
$event_dates = \'<option value="" disabled selected>Choose Date</option>\';
$event_dates .= \'<option value="\'.$first.\'">\'.$first.\'</option>\';
while($first<$last) :
$first = $first + 1;
$event_dates .= \'<option value="\'.$first.\'">\'.$first.\'</option>\';
endwhile;
}
ob_clean();
return $event_dates;
wp_die();
}
（我知道构建日期的代码仍然需要一些工作才能显示正确的日期。）
然后，在页面模板中：
<?php function date_chooser () {
$ajax_url = admin_url( \'admin-ajax.php\' );
$grabDates = "
<script>
var ajaxUrl = \'{$ajax_url}\',
dropdownEvent = jQuery(\'#chooseEvent\'),
dropdownDate = jQuery(\'#chooseDate\');
dropdownEvent.on(\'change\', function (e) {
var value = e.target.selectedOptions[0].value,
success,
data;
if (!!value) {
data = {
\'event\' : value,
\'action\' : \'dynamic_dropdown\'
};
success = function ( response ) {
dropdownDate.html( response );
};
jQuery.post( ajaxUrl, data, success );
}
});
</script>";
return $grabDates;
}
echo date_chooser(); ?>
这段代码帮了我一部分。一旦#chooseEvent下拉列表有一个选择，它将捕获正确的帖子ID，#ChooseTestate下拉列表将从我的占位符中清空自己，但不会加载任何其他内容。
我试过让dynamic\\u dropdown\\u func（）返回“Hello world！”但它也不能做到这一点，所以我认为我没有正确地触发和返回ajax函数。
SO网友:Paul \'Sparrow Hawk\' Biron
我更喜欢使用jQuery.ajax() 结束jQuery.post(), 因为我似乎可以更好地控制错误处理。
在页面模板中，执行以下操作：
function
date_chooser ()
{
$ajax_url = admin_url( \'admin-ajax.php\' );
$grabDates = "
<script>
var ajaxUrl = \'{$ajax_url}\',
dropdownEvent = jQuery(\'#chooseEvent\'),
dropdownDate = jQuery(\'#chooseDate\');
dropdownEvent.on(\'change\', function (e) {
var value = e.target.selectedOptions[0].value,
success,
data;
if (!!value) {
var data = {
action: \'dynamic_dropdown\',
event: value
} ;
jQuery.ajax ({
type: \'POST\',
async: true,
url: ajaxUrl,
data: data,
dataType: \'JSON\',
success: function (response) {
// handle ajax success
if (response.success) {
// handle success, returned with wp_send_json_success ()
dropdownDate.html (response.data) ;
}
else {
// handle errors, returned with wp_send_json_error ()
}
},
error: function (xhr, ajaxOptions, thrownError) {
// handle ajax errors
}
}) ;
}
});
</script>";
echo $grabDates;
}
在您的
functions.php, 执行以下操作：
add_action( \'wp_ajax_dynamic_dropdown\', array ($this, \'dynamic_dropdown_func\' ));
add_action( \'wp_ajax_nopriv_dynamic_dropdown\', array ($this, \'dynamic_dropdown_func\' ));
function
dynamic_dropdown_func ()
{
if (!isset($_POST[\'event\'])) {
wp_send_json_error (\'event not set\') ;
}
$event_id = $_POST[\'event\'];
$first = get_field(\'first_day\',$event_id);
$last = get_field(\'last_day\',$event_id);
$event_dates = \'<option value="" disabled selected>Choose Date</option>\';
$event_dates .= \'<option value="\'.$first.\'">\'.$first.\'</option>\';
while($first<$last) :
$first = $first + 1;
$event_dates .= \'<option value="\'.$first.\'">\'.$first.\'</option>\';
endwhile;
ob_clean () ;
wp_send_json_success ($event_dates) ;
}
注意使用
wp_send_json_success() 和
wp_send_json_error()
