使用Ajax WordPress复选框获取模板

Question

我正在尝试基于复选框加载内容模板，但希望使用AJAX来改进我的编码结构，但不确定如何改进。我之前没有AJAX的经验，所以我非常感谢你的帮助。

HTML
<input type="checkbox" class="checkbox" id"content_one">
<input type="checkbox" class="checkbox" id="content_two"> 

PHP/Jquery

jQuery(document).ready( function() {
if ($('#content_one').is(':checked')) {
<?php get_template('content_one'); ?> //displays a post loop
}
if ($('#content_two').is(':checked')) {
<?php get_template('content_two'); ?> //displays a post loop
}
});

Answer 1

如果你想要ajax，你需要在wordpress中注册操作，它应该是这样的。

add_action('wp_ajax_your_action_name', 'my_fallback_function')
add_action('wp_enqueue_scripts', 'my_script');

你需要在这里指定你的函数，在functions.php中，它将类似于这个

function my_fallback_function()
{
$param = $_GET['param'];
echo get_template($param);
wp_die();
}
function my_script()
{
wp_localize_script(
'ajaxUrl',
'ajaxObject',
array('ajax_url' => admin_url( 'admin-ajax.php' )
);
}

然后我们需要从客户端指定ajax调用，它将类似于

$(document).ready(function() {
$("input[type='checkbox']").click((e) => {
const content = $(e.target).val();
const params = {
'action': 'your_action_name' // should be the same in the wp_ajax,
'param': content 
};
$.ajax({
method: 'GET',
url: ajaxObject.ajax_url
data: params,
done(function(respond){
//append your respond here
})
})
})
})

<label for="checkbox1"><input type="checkbox" name="checkbox1" value="content_1"/>Content 1</label>
<label for="checkbox2"><input type="checkbox" name="checkbox2" value="content_2"/>Content 1</label>