如何在WordPress中调用ajax

17 浏览
0 Comments

如何在WordPress中调用ajax

我的ajax调用输出总是显示0，不知道为什么。

在functions.php中，我有以下代码：

function get_data() {
    $abc = '1';
    $result = $wpdb->get_results("SELECT * FROM ".$wpdb->options ." WHERE option_name LIKE '_transient_%'");
    echo  $result; //返回此值，但仍显示0
    wp_die();
}
add_action( 'wp_ajax_nopriv_get_data', 'get_data' );
add_action( 'wp_ajax_get_data', 'get_data' );

我的ajax调用在javascript中：

$('body').on("click", ".re-reset-btn", function(e){
    var panel = $('#re-compare-bar');       
    $.ajax({
             type : "GET",
             dataType : "json",
             url : "/wp-admin/admin-ajax.php",
             data : {action: "get_data"},
             success: function(response) {
                   alert("无法添加您的投票");
                   alert(response);
                }
        });   
    $("#re-compare-bar-tabs div").remove(); 
    $('.re-compare-icon-toggle .re-compare-notice').text(0); 
});

我在WordPress中进行ajax调用，没有使用插件，但却没有得到我传递的内容。即使我输出$abc，它仍然显示0。

0

3 答案

0 Comments

如何在WordPress中调用ajax

我曾经遇到过同样的问题。当时我对WordPress还很陌生。因此，我在这里解释一下，以便每个新学习者都能理解在WordPress中如何调用ajax。

首先，在wp-content/theme/selected_theme文件夹下的function.php文件中创建一个函数。这里，selected_theme可能是你的主题名称。

在上面的问题中，创建了一个名为get_data()的函数：

function get_data() {
    echo "test";
    wp_die();  //die();
}
add_action( 'wp_ajax_nopriv_get_data', 'get_data' );
add_action( 'wp_ajax_get_data', 'get_data' );

在上面的两行代码中：

1. 使用add_action方法来实现钩子。这里，我传递了两个参数，第一个是`wp_ajax_nopriv_get_data`。在这里，你可以用你自己选择的名称替换get_data，并且section参数是get_data，即你想要调用的函数名。

2. 在第二个add_action中，我传递了两个参数，第一个是`wp_ajax_get_data`。在这里，你可以用你自己选择的名称替换get_data，并且section参数是get_data，即你想要调用的函数名。

这里，wp_ajax_nopriv在用户未登录时调用，wp_ajax在用户登录时调用。

jQuery.ajax({
    type: "post",
    dataType: "json",
    url: "/wp-admin/admin-ajax.php", //这是WordPress中已经存在的ajax文件
    data: {
        action:'get_data', //这个值是add_action的第一个参数
        id: 4
    },
    success: function(msg){
        console.log(msg);
    }
});

哇，出于某种原因，我完全忘记了`no_priv`部分。这解决了我的问题。谢谢！

0
0 Comments

问题的原因是需要在WordPress中调用ajax时，需要满足一定的要求和条件，包括在前端中加载wp-util脚本、使用wp_ajax_*钩子等。解决方法是按照要求和条件进行设置和编码。

WordPress提供了一个方便的函数来访问admin-ajax。在wp-admin中不需要做任何操作，js库始终被加载。在前端中，需要通过enqueue_script函数来加载wp-util脚本，然后就可以使用wp.ajax对象来进行ajax请求。

具体的步骤如下：

1. 在functions.php或者主题的functions文件中添加以下代码：

add_action( 'wp_enqueue_scripts', 'my_enqueue_function' );
function my_enqueue_function() { 
    // Option 1: Manually enqueue the wp-util library.
    wp_enqueue_script( 'wp-util' );
    // Option 2: Make wp-util a dependency of your script (usually better).
    wp_enqueue_script( 'my-script', 'my-script.js', [ 'wp-util' ] );
}

2. 在JavaScript中，使用wp.ajax对象来进行ajax请求，示例如下：

wp.ajax.post( "get_data", {} )
  .done(function(response) {
    alert("Your vote could not be added");
    alert(response);
  });

3. 在PHP中，需要创建wp_ajax_*的钩子函数来处理ajax请求，示例如下：

add_action( 'wp_ajax_nopriv_get_data', 'my_ajax_handler' );
add_action( 'wp_ajax_get_data', 'my_ajax_handler' );
function my_ajax_handler() {
    wp_send_json_success( 'It works' );
}

另外，WordPress还提供了两个函数来处理ajax响应，分别是wp_send_json_success和wp_send_json_error，它们返回一个JSON对象并立即终止请求。

最后，如果在调用ajax时遇到问题，可以先检查是否满足Requirements中的要求，确保页面使用了wp_enqueue_script( 'wp-util' )。

以上是如何在WordPress中调用ajax的方法和解决方法。

0
0 Comments

在WordPress的后台，有一个名为global ajaxurl的变量，由WordPress自身定义。

然而，在前端中，WordPress并没有创建这个变量。这意味着，如果你想在前端使用AJAX调用，你必须自己定义这样的变量。

一个好的方法是使用wp_localize_script。假设你的AJAX调用在my-ajax-script.js文件中，那么可以按照以下方式为这个JS文件添加wp_localize_script：

function my_enqueue() {
    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );
    wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

在本地化你的JS文件之后，你可以在JS文件中使用my_ajax_object对象：

jQuery.ajax({
    type: "post",
    dataType: "json",
    url: my_ajax_object.ajax_url,
    data: formData,
    success: function(msg){
        console.log(msg);
    }
});

输出的错误信息为my_ajax_object未定义。

请将wp_local_script替换为wp_localize_script，我已经修改了代码。

0