在 Wordpress 中使用 ajax 提交表单

Question

我试图在 wordpress 中获取 ajax 请求的结果，但我在 javascript 的警告框中得到的结果为“0”，因此表单如下所示：

 <form class="form" id="ajax-contact-form" action="#">
        <input type="text" name="name" id="name"  placeholder="Name" required="">
        <button type="submit" class="btn">Submit</button>
</form>

JavaScript 看起来像这样：

 $('#ajax-contact-form').submit(function(e){

    $.ajax({
         data: {action: 'contact_form'},
         type: 'post',
         url: ajaxurl,
         success: function(data) {
              alert(data); // This prints '0', I want this to print whatever name the user inputs in the form.

        }
    });

})

和PHP：

 add_action('wp_ajax_contact_form', 'contact_form');
add_action('wp_ajax_nopriv_contact_form', 'contact_form');

function contact_form()
{
echo $_POST['name'];
}

有谁知道上面的代码是否正确，我也试过 $_REQUEST[‘name’] 但它不起作用。

非常感谢，

原文由 MariaZ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这样的事情，你没有添加 name 你在 PHP 中期望的参数 contact_form 函数，所以你必须将它添加到 data 属性jQuery ajax 函数调用。

 $('#ajax-contact-form').submit(function(e){
    var name = $("#name").val();
    $.ajax({
         data: {action: 'contact_form', name:name},
         type: 'post',
         url: ajaxurl,
         success: function(data) {
              console.log(data); //should print out the name since you sent it along

        }
    });

});

原文由 Sterling Archer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

重新审视答案，年份是 2022 年。已接受的答案是在不验证 WordPress Nonces 的情况下盲目接受任何 AJAX 请求。 AJAX 请求应该被验证为合法请求，而不是来自某些未知不良行为者的 潜在恶意请求。

• @see https://developer.wordpress.org/plugins/javascript/enqueuing/#nonce

您的 AJAX 处理程序应该做的第一件事是验证 jQuery 使用 check_ajax_referer() 发送的随机数，它应该与脚本排队时本地化的值相同。

首先，我们传递 AJAX url 并通过 wp_localize_script() 创建并传递我们的随机数。 wp_localize_script() 必须在使用 wp_register_script() 或 wp_enqueue_script() 注册脚本后调用。

 <?php

wp_localize_script( 'script', 'localize',
    array(
        '_ajax_url' => admin_url( 'admin-ajax.php' ),
        '_ajax_nonce' => wp_create_nonce( '_ajax_nonce' ),
    )
);

从我们的 script.js 文件中，我们声明了我们的 AJAX 函数。

 $(function(){
    $('button').click(() => {
        $.ajax({
            type: 'POST',
            url: localize._ajax_url,
            data: {
                _ajax_nonce: localize._ajax_nonce,
                test: 'test',

                /**
                 * The action parameter is the The dynamic portion of the wp_ajax_{$action} action hook (Ajax action callback being fired).
                 *
                 * @see https://developer.wordpress.org/reference/hooks/wp_ajax_action/
                 * @see https://developer.wordpress.org/reference/hooks/wp_ajax_nopriv__requestaction/
                 */
                action: '_POST_action',
            },
            success: (res) => {
                console.log(res);
            }
        });
    });
});

然后我们处理结果并将 JSON 响应发送回 Ajax 请求。

 <?php

add_action( 'wp_ajax__POST_action', function () {

    if ( check_ajax_referer( '_ajax_nonce' ) ) {

        $test = $_POST['test'];

        //...

        wp_send_json_success();

    } else {

        wp_send_json_error();

    };

} );

原文由 amarinediary 发布，翻译遵循 CC BY-SA 4.0 许可协议