使用Vanilla JS在wordpress中通过ajax发送json

在WordPress中使用Vanilla JS通过Ajax发送JSON数据，可以通过以下步骤实现：

首先，确保你已经在WordPress中加载了Vanilla JS库。你可以在主题的functions.php文件中使用以下代码来加载：

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库。

创建一个WordPress页面模板或在现有的页面模板中添加以下代码。这将创建一个包含一个按钮的页面，当点击按钮时，将通过Ajax发送JSON数据。

<?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，并在请求的回调函数中处理响应。

创建一个WordPress插件或在主题的functions.php文件中添加以下代码，以处理Ajax请求并返回响应。

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数据的示例。请注意，这只是一个基本示例，你可以根据自己的需求进行修改和扩展。