如何在Wordpress中调用ajax要求JS 库网络工序代码

php javascript jquery wordpress

2022-08-30 15:03:38

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

在我有这个代码functions.php

function get_data() {
    $abc = '1';
    $result = $wpdb->get_results("SELECT * FROM ".$wpdb->options ." WHERE option_name LIKE '_transient_%'");
    echo  $result; //returning this value but still shows 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("Your vote could not be added");
                   alert(response);
                }
        });   

    $("#re-compare-bar-tabs div").remove(); 
    $('.re-compare-icon-toggle .re-compare-notice').text(0); 

});

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

答案 1

在后端，有由WordPress本身定义的全局ajaxurl变量。

此变量不是由 WP 在前端创建的。这意味着，如果要在前端使用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);
    }
});

答案 2

实际上，WordPress带有一个方便的功能来访问admin-ajax。

要求

在wp-admin中，您不需要做任何事情，js库始终是加载的

在前端，您需要将脚本排入队列，如下所示：wp-util

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

JS 库

wp-util 脚本包含可用于发出 ajax 请求的对象：wp.ajax

 wp.ajax.post( action, data ).done( okCallback ).fail( errCallback )

您的示例：

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

网络工序代码

当然，您仍然需要在PHP脚本中创建钩子。wp_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' );
}

提示：

对于Ajax响应，WordPress提供了两个函数：

wp_send_json_success（ $my_data ） 和 wp_send_json_error（ $my_data ） - 两个函数都返回一个 JSON 对象并立即终止请求（即exit;)