在 WordPress 插件中使用 AJAX
Posted
技术标签:
【中文标题】在 WordPress 插件中使用 AJAX【英文标题】:Using AJAX in a WordPress plugin 【发布时间】:2013-07-25 05:13:42 【问题描述】:我正在尝试创建一个基于 AJAX 的 WordPress 示例插件。我阅读了一个教程并做了一个插件,但它不起作用。我是 AJAX 的新手。这是我尝试过的代码:
<?php
class ajaxtest
function ajaxcontact()
?>
<div id="feedback"></div>
<form name="myform" id="myform">
<li>
<label for fname>First Name</label><input type="text" id="fname" name="fname" value=""/>
</li>
<li>
<label for lname>Last Name</label><input type="text" id="lname" name="lname" value=""/>
</li>
<input type="submit" value="Submit" id="submit" name="submit"/>
</form>
<script type="text/javascript">
jQuery('#submit').submit(ajaxSubmit);
function ajaxSubmit()
var newcontact = jQuery(this).serialize();
jQuery.ajax(
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: newcontact,
success: function(data)
jQuery("#feedback").html(data);
);
return false;
</script>
<?php
function addcontact()
$fname = $_POST['fname'];
if ($fname != "")
echo "Your Data is" . $fname;
else
echo "Data you Entered is wrong";
die();
function jquery_add_to_contact()
wp_enqueue_script('jquery'); // Enqueue jQuery that's already built into WordPress
add_action('wp_enqueue_scripts', 'jquery_add_to_contact');
add_action('wp_ajax_addcontact', array('ajaxtest', 'addcontact'));
add_action('wp_ajax_nopriv_addcontact', array('ajaxtest', 'addcontact')); // not really needed
add_shortcode('cform', array('ajaxtest', 'ajaxcontact'));
我将其用作简码,但没有得到输出。有什么错误?
【问题讨论】:
见How to Use Ajax in a WordPress Shortcode? 【参考方案1】:您需要在 AJAX 调用中添加“操作”。
jQuery.ajax(
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: newcontact,
action: 'addcontact',
success: function(data)
jQuery("#feedback").html(data);
);
该值应与 wp_ajax 的 add_action 挂钩相同。例如
add_action( wp_action_action_value, 'myfunc' );
这允许 WordPress 在进行 AJAX 调用时知道要运行哪个函数。
This Codex page has some useful info 和 this article describes 如何更好地优化您的代码。
【讨论】:
【参考方案2】:WordPress 环境
首先,为了完成这个任务,建议注册一个 jQuery 脚本,然后将请求推送到服务器。这些操作将被钩在wp_enqueue_scripts
动作钩子中。在同一个钩子中,您应该将wp_localize_script
用于包含任意JavaScript。通过这种方式,前端将有一个可用的 JS 对象。这个对象带有正确的 url 供 jQuery 句柄使用。
请查看:
-
wp_register_script();函数
wp_enqueue_scripts钩子
wp_enqueue_script();函数
wp_localize_script();函数
在主插件文件中,添加这些。
add_action( 'wp_enqueue_scripts', 'so_enqueue_scripts' );
function so_enqueue_scripts()
wp_register_script(
'ajaxHandle',
plugins_url('PATH TO YOUR SCRIPT FILE/jquery.ajax.js', __FILE__),
array(),
false,
true
);
wp_enqueue_script( 'ajaxHandle' );
wp_localize_script(
'ajaxHandle',
'ajax_object',
array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) )
);
文件:jquery.ajax.js
此文件进行 AJAX 调用。
jQuery(document).ready( function($)
// Some event will trigger the ajax call, you can push whatever data to the server,
// simply passing it to the "data" object in ajax call
$.ajax(
url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
type: 'POST',
data:
action: 'myaction', // this is the function in your functions.php that will be triggered
name: 'John',
age: '38'
,
success: function( data )
//Do something with the result from server
console.log( data );
);
);
还将以下代码添加到插件主文件中。
最后,在您的functions.php 文件中,应该有由您的AJAX 调用触发的函数。 记住后缀:
wp_ajax
(只允许注册用户或管理面板操作该功能)
wp_ajax_nopriv
(允许无权限用户使用该功能)
这些后缀加上动作组成了你的动作名称:
wp_ajax_myaction
或 wp_ajax_nopriv_myaction
add_action( "wp_ajax_myaction", "so_wp_ajax_function" );
add_action( "wp_ajax_nopriv_myaction", "so_wp_ajax_function" );
function so_wp_ajax_function()
//DO whatever you want with data posted
//To send back a response you have to echo the result!
echo $_POST['name'];
echo $_POST['age'];
wp_die(); // ajax call must die to avoid trailing 0 in your response
【讨论】:
更完整的答案,恕我直言,应该被接受(c/c @Fresher)。有一个方便的函数wp_send_json_success
,它同时包含echo
和wp_die
。
注意——上面有一个明显的错误。 'action' 是数据点,因此应该是数据数组的一部分,而不是单独的参数......是的,这是一个更好的解释和正确的方法!
起初这对我不起作用,但 wutang 指出了问题,虽然我不明白他的意思。为了澄清上述内容将始终返回 0(这意味着未找到函数),除非您将 ajax 调用中的上面是“myaction”的“action”移动到数据有效负载中。所以你的数据应该是这样的:data: action: 'myaction', name: 'John', age: '38' ,除此之外,这个答案很准确。
请注意有一个错字: admin_url( 'admin-ajax.php' ) Not admin_url( 'admin_ajax.php' ) - not _ 很烦人...花了一段时间试图找出原因那没用!
您的意思是functions.php
文件?不建议不要弄乱核心主题文件吗?如果我想将所有内容严格保存在插件文件中,还有什么选择?以上是关于在 WordPress 插件中使用 AJAX的主要内容,如果未能解决你的问题,请参考以下文章
在 WordPress 插件开发中使用 javascript 验证
如何在 WordPress 中使用 jQuery Cycle 插件?