在 Wordpress 中使用 ajax 提交表单

Posted

技术标签:

【中文标题】在 Wordpress 中使用 ajax 提交表单【英文标题】:Submitting a form with ajax in Wordpress 【发布时间】:2013-09-17 15:13:41 【问题描述】:

我试图在 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'] 还是不行。

非常感谢,

【问题讨论】:

除了操作之外,您没有向服务器发送任何数据 这行不通,您正在尝试访问尚未提交的已发布值 我建议你看看这个插件jquery.malsup.com/form 出于安全原因,您还应该包含一个 nonce 字段 - codex.wordpress.org/Function_Reference/wp_nonce_field 【参考方案1】:

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

$('#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

        
    );

);

【讨论】:

我可以使用 jQuery serialize() 代替 data: name:name 吗? @Inderjeet 为什么不呢?您可以使用 $(this).serialize(); 发送完整的表单数据;【参考方案2】:

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

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

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

首先我们传递 AJAX url 并创建并通过 wp_localize_script() 传递我们的 nonce。必须在使用wp_register_script()wp_enqueue_script() 注册脚本后调用wp_localize_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();

    ;

 );

【讨论】:

【参考方案3】:

你也应该在你的 javascript 中为 name 添加一个属性。

它可能看起来像这样............

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

$.ajax( 
     data: action: 'contact_form', name:name,
     type: 'post',
     url: ajaxurl,      
     success: function(data) 
          alert(data); 
    
);

)

【讨论】:

@downvoter 请在您对任何答案或问题投反对票时说明原因。

以上是关于在 Wordpress 中使用 ajax 提交表单的主要内容,如果未能解决你的问题,请参考以下文章

在 Wordpress 中使用 AJAX 表单上传文件错误 - 指定文件上传测试失败

通过 AJAX 更新 wordpress 表单第二次不起作用

陷阱 Ajax 表单提交事件

在 wordpress 插件下未调用 Ajax 功能

在wordpress中返回真假的Ajax函数问题

仅 Ajax 在 WordPress 中处理 Bootstrap Modal 的第一个元素