如何在 Wordpress 中調用 ajax

Question

我的 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。

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

Answer 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代碼

當然，您仍然需要在 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; ）

Answer 3

<form type="post" action="" id="newCustomerForm">

    <label for="name">Name:</label>
    <input name="name" type="text" />

    <label for="email">Email:</label>
    <input name="email" type="text" />

    <label for="phone">Phone:</label>
    <input name="phone" type="text" />

    <label for="address">Address:</label>
    <input name="address" type="text" />

    <input type="hidden" name="action" value="addCustomer"/>
    <input type="submit">
</form>
<br/><br/>
<div id="feedback"></div>
<br/><br/>

函數.php

wp_enqueue_script('jquery');

function addCustomer() {

    global $wpdb;

    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $email = $_POST['email'];
    $address = $_POST['address'];

    if ( $wpdb->insert( 'customers', array(
        'name' => $name,
        'email' => $email,
        'address' => $address,
        'phone' => $phone
    ) ) === false ) {
        echo 'Error';
    } else {
        echo "Customer '".$name. "' successfully added, row ID is ".$wpdb->insert_id;
    }
    die();
}
add_action('wp_ajax_addCustomer', 'addCustomer');
add_action('wp_ajax_nopriv_addCustomer', 'addCustomer');

javascript

<script type="text/javascript">
jQuery('#newCustomerForm').submit(ajaxSubmit);

function ajaxSubmit() {
    var newCustomerForm = jQuery(this).serialize();

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

    return false;
}
</script>

Answer 4

我有同樣的問題。 我是 WordPress 的新手。 因此，我在這里進行解釋，以便每個新學習者都能了解 ajax 是如何在 WordPress 中調用的。

首先，在 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", //this is wordpress ajax file which is already avaiable in wordpress
    data: {
        action:'get_data' //this value is first parameter of add_action,
        id: 4
    },
    success: function(msg){
        console.log(msg);
    }
});

Answer 5

使用admin_url('admin-ajax.php');添加admin-ajax.php admin_url('admin-ajax.php');

<script type="text/javascript">
    $('body').on("click", ".re-reset-btn", function(e){

        var panel = $('#re-compare-bar');

        $.ajax({
            type : "POST",
            dataType : "json",
            url : "<?php echo admin_url('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);

    });
</script>

Answer 6

如果您在響應中得到0 ，則表示您的 ajax 調用工作正常。 但是，您還沒有在函數 get_data 中將 $wpdb 定義為全局變量。 檢查您的錯誤日志，您一定在那里看到錯誤。 嘗試：

function get_data() {
    global $wpdb;
    $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();
}

Answer 7

步驟 1：在函數文件中添加 ajax 'wp_enqueue_script' 文件，您必須在其中添加其他 'wp_enqueue_script' 或 'wp_enqueue_style' 文件

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

第 2 步：現在你需要創建函數，在那里你想得到響應，使用 ajax 例如下面

 add_action('wp_footer','add_ajaxex_in_footer');
   function add_ajaxex_in_footer()
    { ?>

<script type="text/javascript">
    jQuery('#sbmtbtn').click(function(){
    jQuery.ajax({
    type:"POST",
    url:my_ajax_object.ajax_url,
    data: {action:'my_special_ajax_call_enroll_cours'},
    success:function(res){
     console.log(res);
    }
   });
  });</script><?php 
 }

第 3 步：現在您必須創建函數，您必須在其中編寫查詢，

add_action('wp_ajax_my_special_ajax_call_enroll_cours', 'enroll_cours');
add_action('wp_ajax_nopriv_my_special_ajax_call_enroll_cours', 'enroll_cours');

 function enroll_cours()
  { 
      echo "Here you van write Query or anything"; 
   }
exit;
}

=> 如果您想在 onClick 按鈕后觸發 ajax 請求，只需傳遞按鈕 ID

<input type="button" id="sbmtbtn" name="Save">

Answer 8

這里如何在普通的 vanilla js 中創建 WordPress 中的 AJAX 調用。

var urlToajax=jsajaxe_S.ajaxurl;


function P_lifg(){ 

 var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
  document.getElementById("demo").innerHTML = this.responseText;
  document.getElementById("demo2").innerHTML = urlToajax+ "?action=testfirst";
  }
};


  xmlhttp.open("GET", urlToajax+ "?action=testfirst", true);    
  xmlhttp.send(0);

}

請參閱此博客，添加 functions.php 和模板 html 以完成此工作，以及與 jQuery 不同的 vanilja js 中沒有數據的原因，而只是操作

這里在functions.php中add_actions：

add_action( 'wp_ajax_testfirst', __NAMESPACE__ .'\\FunctionTF' );       
add_action( 'wp_ajax_nopriv_testfirst', __NAMESPACE__ .'\\FunctionTF');

在上面添加這個函數，現在這個函數：

 function FunctionTF(){

 exit( "Hola hola" );
    
} 

看解釋為什么？ 我博客中“退出”中的代碼

這里在一些 wp 模板上添加這個 html

 <div id="demo"></div>
 <div id="demo2"></div>
 <button id="spesial_button" onclick="P_lifg()">I am spesial</button>

見休息：https://praybook2.blogspot.com/2021/03/AJAX-plain-vanilla-js-wp-and-namespace.html