如何在Wordpress中调用ajax

问题描述 投票：0回答：9

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

javascript php jquery wordpress
9个回答
44
投票

后端有 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);
    }
});
38
投票

其实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;
）

12
投票

我也有同样的问题。我是 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方法用于实现hook。在这里，我传递两个参数，第一个是
    wp_ajax_nopriv_get_data
    。在这里，您可以将 get_data 替换为您的选择。节参数是 get_data，它是您要调用的函数名称。
  2. 在第二个add_action中，我传递了两个参数，第一个是
    wp_ajax_get_data
    。在这里，您可以将 get_data 替换为您的选择。节参数是 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);
    }
});
6
投票

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

 添加
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>
5
投票
<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>
1
投票

如果您在响应中收到 

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();
}
1
投票

第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">
0
投票

这里介绍如何用普通的 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来完成这项工作，还解释了为什么vanilja js中没有数据（与jQuery不同），而只是操作

这里在functions.php中添加_actions：

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

添加这个函数，现在这个函数：

 function FunctionTF(){

 exit( "Hola hola" );
    
}

看到解释为什么吗？我博客中“退出”的代码

在这里将此 html 添加到一些 wp 模板上

 <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

0
投票
add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );

}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.