在WordPress插件中使用AJAX

我正在尝试创建一个基于AJAX的WordPress示例插件。 我阅读了一个教程并做了一个插件，但它没有用。 我是AJAX的新手。 这是我试过的代码：

 
 
 
 First Name 
 
 Last Name 
  
  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; }  <?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')); 

我用它作为短代码，但我没有得到输出。 怎么了？

Answer 1

WordPress环境

首先，为了完成这项任务，建议注册然后将jQuery脚本排入队列，将脚本推送到服务器。 这些操作将挂钩在wp_enqueue_scripts动作钩子中。 在同一个钩子中，你应该把它用于包含任意JavaScript的wp_localize_script 。 通过这种方式，前端将有一个JS对象。 该对象进行jQuery句柄使用的正确url。

请看看：

1. wp_register_script（）; function
2. wp_enqueue_scripts钩子
3. wp_enqueue_script（）; function
4. wp_localize_script（）; function

在主插件文件中，添加这些。

 add_action( 'wp_enqueue_scripts', 'so_enqueue_scripts' ); function so_enqueue_scripts(){ wp_register_script( 'ajaxHandle', get_template_directory() . 'PATH TO YOUR SCRIPT 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调用触发的函数。 记住后缀：

1. wp_ajax （仅限注册用户或管理面板操作的function）
2. wp_ajax_nopriv （允许无特权用户的function）

这些后缀加上操作组成了您的操作名称：

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 } 

Answer 2

您需要在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调用时要运行的函数。

此Codex页面包含一些有用的信息 ， 本文将介绍如何更好地优化您的代码。