Wordpress使用Wordpress将Ajax值传递到特定页面

Z时代
2024-01-10
分类：问答

我想将变量传递到特定页面。我找到了一个简单的示例，解释了如何在Wordpress中使用Ajax。

jQuery(document).ready(function($) {
// We'll pass this variable to the PHP function example_ajax_request
var fruit = 'Banana';
// This does the ajax request
$.ajax({
    url: ajaxurl,
    data: {
        'action':'example_ajax_request',
        'fruit' : fruit
    },
    success:function(data) {
        // This outputs the result of the ajax request
        console.log(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
});
});

function example_ajax_request() {
// The $_REQUEST contains all the data sent via ajax
if ( isset($_REQUEST) ) {
    $fruit = $_REQUEST['fruit'];
    // Let's take the data that was sent and do something with it
    if ( $fruit == 'Banana' ) {
        $fruit = 'Apple';
    }
    // Now we'll return it to the javascript function
    // Anything outputted will be returned in the response
    echo $fruit;
    // If you're debugging, it might be useful to see what was sent in the $_REQUEST
    // print_r($_REQUEST);
}
// Always die in functions echoing ajax content
  die();
 }
add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
   wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' =>   admin_url( 'admin-ajax.php' ) ) );

不幸的是我不能传递变量。我检查了代码，并得到以下错误：

Error: ajax_object is not defined

您是否知道另一种获得相同结果的方法？

回答：

您距离很近，但缺少一些小东西……

我在评论中的意思是，您需要'ajax-script'在两种情况下都使用这种方式：

add_action('wp_enqueue_scripts', 'add_js_scripts'); 
add_js_scripts(){
    wp_enqueue_script( 'ajax-script', get_template_directory_uri().'/js/script.js', array('jquery'), '1.0', true );
    wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajaxurl' =>   admin_url( 'admin-ajax.php' ) ) );
}

更改为

function example_ajax_request() {
    // The $_REQUEST contains all the data sent via ajax
    if ( isset($_POST) ) {
        $fruit = $_POST['fruit'];
        // Let's take the data that was sent and do something with it
        if ( $fruit == 'Banana' ) {
            $fruit = 'Apple';
        }
        // Now we'll return it to the javascript function
        // Anything outputted will be returned in the response
        echo $fruit;
        // If you're debugging, it might be useful to see what was sent in the $_POST
        // print_r($_POST);
    }
    // Always die in functions echoing ajax content
      die();
 }

新增add_action( 'wp_ajax_nopriv_ … )

add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' ); // <= this one
add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );

对于您的jQuery脚本script.js文件，有2件重要的遗漏小事情：

jQuery(document).ready(function($) {
    /* We'll pass this variable to the PHP function example_ajax_request */
    var fruit = 'Banana';
    /* This does the ajax request */
    $.ajax({
        url: ajax_object.ajaxurl, /* <====== missing here */
        type : 'post', /*    <========== and missing here */
        data: {
            'action':'example_ajax_request',
            'fruit' : fruit
        },
        success:function(data) {
            /* This outputs the result of the ajax request */
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });
});