本文我们分享三款最常用的js插件，使用这三种插件的任意一个都可以方便的在wordpress中实现ajax请求。

服务器端代码

首先在主题文件夹根目录的functions.php文件中创建函数和两个钩子。函数的名字将被用于客户端的网络请求，因为在wordpress中所有的ajax请求都是向同一个网址发出的，因此函数的名字是WordPress如何识别哪个函数需要被执行的唯一方式。

WordPress给出了两个钩子，其后缀是我们选择的自定义函数名称。为了简单起见，我们把它叫做 “get_recent_posts_ajax”。一个钩子是为登录的用户准备的，另一个是为访客用户准备的。这里我们只是返回一个JSON响应，但你可以在这里做任何复杂的计算或用cURL做另一个网络请求。

function get_recent_posts_ajax(){
    if( !wp_verify_nonce($_POST['nounce'],'get_recent_posts_ajax') ){
        echo json_encode(array( 'status' => false, 'message' => 'Nounce error' ));
        exit(0);
    }

    $data = array();
    $posts = wp_get_recent_posts(array(
        'posts_per_page' => $_POST['number_of_posts'],
        'post_status' => 'publish',
    ));

    foreach ($posts as $key => $value) {
        $data[] = array(
            'ID' => $value['ID'],
            'post_date' => $value['post_date'],
            'post_title' => $value['post_title'],
            'post_excerpt' => $value['post_excerpt'],
            'comment_count' => $value['comment_count'],
            'permalink' => get_permalink($value['ID']),
        );
    }
    echo json_encode($data);
    exit(0);
}
// 已登录用户
add_action('wp_ajax_get_recent_posts_ajax', 'get_recent_posts_ajax');
// 未登录用户
add_action('wp_ajax_no_priv_get_recent_posts_ajax', 'get_recent_posts_ajax');

客户端代码

HTML

<form id="form" action="<?php echo admin_url('admin-ajax.php'); ?>">
    <input type="number" min="1" name="number_of_posts" value="" required />
    <input type="hidden" name="nounce" value="<?php echo wp_create_nonce('get_recent_posts_ajax'); ?>" />
    <input type="hidden" name="action" value="get_recent_posts_ajax" />
    <input type="hidden" name="url" value="https://www.codesou.cn" />
    <button type="submit">Submit</button>
</form>

JAVASCRIPT

Option 1: Vanilla JS

var form = document.getElementById('form');
form.addEventListener('submit', function(e){
    e.preventDefault();

    var formData = new FormData(form);
    formData.append('extra_key', 'extra_value');
    var xhr = new XMLHttpRequest();
    xhr.open('POST', form.getAttribute('action'), true);
    xhr.onreadystatechange = function (res) {
        if (this.readyState == 4 && this.status == 200) {
            var res = JSON.parse(xhr.responseText);
            console.log(res);
        }
        if (this.readyState == 4 && this.status == 404){
            console.log('An error occurred')
        }
    }
    xhr.send(formData);

}, false);

Option 2: Axios

var form = document.getElementById('form');
form.addEventListener('submit', function(e){
    e.preventDefault();

    var formData = new FormData(form);
    formData.append('extra_key', 'extra_value');
    var xhr = new XMLHttpRequest();
    axios.post(form.getAttribute('action'),
        formData
    ).then(function (res) {
        console.log(res.data);
    }).catch(function (err) {
        console.log(err);
    }).then(function () {
        // always executed
    });

}, false);

Option 3: jQuery

jQuery(function ($) {

    $('#form').on('submit', function(e){
        e.preventDefault(); // prevent page refresh on submit

        var formData = new FormData($('#form')[0]); // pass HTML form element as argument
        formData.append('extra_key', 'extra_value');
        $.ajax({
            method: 'POST',
            data: $('#form').serialize(), // you can also use jQuery serialize
            // data: formData,
            // processData: false, // add this if using "new FormData"
            // contentType: false, // add this if using "new FormData"
            url: $('#form').attr('action'),
        }).done(function(res) {
            var res = $.parseJSON(res)
            console.log(res);
        }).fail(function(err){
            console.log(err);
        }).always(function(){
            console.log('this will always execute');
        });
    });
});