在 WordPress 插件中使用 AJAX [英] Using AJAX in a WordPress plugin

问题描述

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

I'm trying to create a WordPress sample plugin based in AJAX. I read a tutorial and did a plugin, but it's not working. I am new to AJAX. Here is the code I tried:

<?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'));

我用它作为短代码，但我没有得到输出.什么错误?

I used this as a shortcode, but I didn't get an output. What's the mistake?

推荐答案

WordPress 环境

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

First of all, in order to achieve this task, it's recommended to register then enqueue a jQuery script that will push the request to the server. These operations will be hooked in wp_enqueue_scripts action hook. In the same hook you should put wp_localize_script that it's used to include arbitrary JavaScript. By this way there will be a JS object available in front end. This object carries on the correct url to be used by the jQuery handle.

请看:

1. wp_register_script(); 函数
2. wp_enqueue_scripts 钩子
3. wp_enqueue_script(); 函数
4. wp_localize_script(); 函数

1. wp_register_script(); function
2. wp_enqueue_scripts hook
3. wp_enqueue_script(); function
4. wp_localize_script(); function

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

In main plugin file, add these.

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 调用.

This file makes the AJAX call.

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

同时将以下代码添加到插件主文件中.

Also add below codes to plugin main file.

最后，在您的functions.php 文件中，应该有由您的AJAX 调用触发的函数.记住后缀:

Finally, on your functions.php file, there should be the function triggered by your AJAX call. Remember the suffixes:

1. wp_ajax(仅允许注册用户或管理面板操作的功能)
2. wp_ajax_nopriv(允许无权限用户的功能)

1. wp_ajax ( allow the function only for registered users or admin panel operations )
2. wp_ajax_nopriv ( allow the function for no privilege users )

这些后缀加上动作构成了动作的名称:

These suffixes plus the action compose the name of your action:

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
}

这篇关于在 WordPress 插件中使用 AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！