在 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 表单上传文件错误 - 指定文件上传测试失败