在 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_myactionwp_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,它同时包含echowp_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 插件中使用 AJAX

如何在 WordPress 中使用 jQuery Cycle 插件?

在 wordpress 中自动执行插件而不激活它们?

在 WordPress 插件中使用“创建 React 应用程序”

如何使用 wordpress react API 在 react 中显示插件内容