在WordPress中使用Vanilla JS通过Ajax发送JSON数据,可以通过以下步骤实现:
function enqueue_vanilla_js() {
wp_enqueue_script( 'vanilla-js', 'https://cdn.jsdelivr.net/npm/vanilla-js@1.0.0/dist/vanilla.min.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_vanilla_js' );
这将在前端页面中加载Vanilla JS库。
<?php
/*
Template Name: Ajax JSON Page
*/
get_header();
?>
<div id="content">
<button id="send-json-button">发送JSON</button>
<div id="response"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('send-json-button');
var responseDiv = document.getElementById('response');
button.addEventListener('click', function() {
var data = {
name: 'John Doe',
email: 'johndoe@example.com'
};
var xhr = new XMLHttpRequest();
xhr.open('POST', '<?php echo admin_url('admin-ajax.php'); ?>');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
responseDiv.innerHTML = response.message;
}
};
xhr.send(JSON.stringify(data));
});
});
</script>
<?php get_footer(); ?>
在上面的代码中,我们创建了一个按钮和一个用于显示响应的div元素。当按钮被点击时,我们创建了一个包含name和email字段的JSON对象,并使用XMLHttpRequest对象发送POST请求到WordPress的admin-ajax.php文件。我们设置了请求头的Content-Type为application/json,并在请求的回调函数中处理响应。
add_action( 'wp_ajax_send_json', 'send_json_callback' );
add_action( 'wp_ajax_nopriv_send_json', 'send_json_callback' );
function send_json_callback() {
$data = json_decode( file_get_contents( 'php://input' ), true );
// 处理接收到的JSON数据
$name = $data['name'];
$email = $data['email'];
// 进行其他处理,例如将数据保存到数据库
// 返回响应
$response = array(
'message' => 'JSON数据已成功接收并处理。'
);
wp_send_json( $response );
}
在上面的代码中,我们使用了wp_ajax_send_json
和wp_ajax_nopriv_send_json
动作钩子来处理Ajax请求。send_json_callback
函数用于处理接收到的JSON数据,并返回一个包含成功消息的响应。
现在,当你访问使用了上述页面模板的WordPress页面时,你将看到一个按钮。当你点击按钮时,通过Ajax发送JSON数据,并在页面上显示响应消息。
这是一个使用Vanilla JS在WordPress中通过Ajax发送JSON数据的示例。请注意,这只是一个基本示例,你可以根据自己的需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云