Php 在WordPress插件中使用AJAX

我正在尝试创建一个基于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'));

名字


姓

jQuery（“#submit”）.submit（ajaxSubmit）；
函数ajaxSubmit（）{
var newcontact=jQuery（this）.serialize（）；
jQuery.ajax({
类型：“POST”，
url:“/wp admin/admin ajax.php”，
资料来源：newcontact，
成功：功能（数据）{
jQuery（“#反馈”）.html（数据）；
}
});
返回false；
}
您需要在AJAX调用中添加一个“操作”

jQuery.ajax({
  type: "POST",
  url: "/wp-admin/admin-ajax.php",
  data: newcontact,
  action: 'addcontact',
  success: function(data) {
    jQuery("#feedback").html(data);
  }
});

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 );
    }
  });
});

该值应该与add_操作钩子到wp_ajax相同。e、 g

add_action( wp_action_{action_value}, 'myfunc' );

这允许WordPress知道在进行AJAX调用时运行哪个函数

以及如何更好地优化现有代码。
WordPress环境

首先，为了完成这项任务，建议先注册一个jQuery脚本，然后将其加入队列，将请求推送到服务器。这些操作将挂接在
wp\u enqueue\u脚本中。在同一个钩子中，您应该放置用于包含任意JavaScript的
wp\u localize\u脚本。通过这种方式，前端将有一个可用的JS对象。此对象携带jQuery句柄要使用的正确url

请看一下：

作用
钩子
作用
作用
在主插件文件中，添加这些

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.ajax({
  type: "POST",
  url: "/wp-admin/admin-ajax.php",
  data: newcontact,
  action: 'addcontact',
  success: function(data) {
    jQuery("#feedback").html(data);
  }
});

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\u ajax\u nopriv
（允许无特权用户使用此功能）
这些后缀加上动作构成动作的名称：

wp\u ajax\u myaction
或
wp\u ajax\u nopriv\u 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
}

看到更完整的答案，IMHO，应该是被接受的（c/c@freshr）。有一个方便的函数，
wp\u send\u json\u success
，它包含
echo
和
wp\u die
。注意，上面有一个明显的错误“操作”是数据点，因此应该是数据数组的一部分，而不是单独的参数。。。是的，这是一个更好的解释和正确的方法！起初这对我不起作用，但吴唐指出了这个问题，尽管我不明白他的意思。为了澄清这一点，除非将ajax调用中的“action”（即上面的“myaction”）移动到数据负载中，否则上述操作将始终返回0（这意味着找不到函数）。所以你的数据应该是这样的：数据：{action:'myaction'，name:'John'，age:'38'}，除此之外，这个答案很精确。请注意有一个输入错误：admin_url（'admin ajax.php'）不是admin_url（'admin_ajax.php'）-不是很烦人。。。花了一段时间想弄明白为什么没用！你是说
functions.php
文件？是否建议不要弄乱核心主题文件？如果我想把所有东西都严格保存在我的插件文件中，还有什么选择呢？