WordPress的ajax調用返回整個HTML頁面

Question

我正在將一個Web應用程序遷移到我的wordpress網站中。 我想將該應用程序放在一個wordpress頁面上。 當我在頁面加載時使用ajax調用初始化內容時，會收到整個頁面的html字符串。

內建於functions.php中的php代碼

<?php 

function my_scripts_method() {

    if (is_page('testpage')) {
        wp_register_script(
            'ajaxexample',
            get_template_directory_uri() . '/js/ajaxexample.js',
            array('jquery')     );
        wp_enqueue_script('ajaxexample');
        wp_localize_script( 'ajaxexample', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) ); 
    }
}
add_action('wp_enqueue_scripts', 'my_scripts_method');




    function example_ajax_request() {


        if ( isset($_REQUEST) ) {

            $fruit = $_REQUEST['fruit'];

            // Trivial action
            if ( $fruit == 'Banana' ) {
                $fruit = 'Apple';
            }


            // return this to js function
            echo $fruit;



        }

       die();
    }

    add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
    add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

和javascript文件`ajaxexample.js`

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,
        data: {
            'action':'nopriv_example_ajax_request',
            'fruit' : fruit
        },
        success:function(data) {
            // This outputs the result of the ajax request
            alert('data:'+data);
            console.log(data);
        },
        error: function(errorThrown){
            alert(errorThrown);
            console.log(errorThrown);
        }
    });  

});

當我加載“ testpage”時，我的ajax返回看起來像：

data:


<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html lang="en-US">
<!--<![endif]-->
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>testpage | TITLE </title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="MYSITEURL/xmlrpc.php">
    <!-- start favicon and apple icons -->
                            <!-- end favicons and apple icons -->
...

我的理解是，ajax請求成功到達了admin-ajax.php但是我不明白返回值，因為我希望wp文件將內容傳遞給我的example_ajax_request函數。 如何獲得預期的php腳本正確處理的ajax請求？

Answer 1

從您的Ajax函數中刪除no_priv

 $.ajax({
        url: ajax_object.ajaxurl,
        data: {
            'action':'example_ajax_request',
            'fruit' : fruit
        },
        success:function(data) {
            // This outputs the result of the ajax request
            alert('data:'+data);
            console.log(data);
        },
        error: function(errorThrown){
            alert(errorThrown);
            console.log(errorThrown);
        }
    });

Answer 2

您的網址不應該是以下內容：

ajax_object.ajax_url

而不是：

ajax_object.ajaxurl

WordPress的ajax調用返回整個HTML頁面

問題描述

內建於functions.php中的php代碼

和javascript文件`ajaxexample.js`

2 個解決方案

解決方案1
2 已采納 2015-05-05 23:40:33

解決方案2
1 2019-01-18 04:10:36

WordPress的ajax調用返回整個HTML頁面

問題描述

內建於functions.php中的php代碼

和javascript文件ajaxexample.js

2 個解決方案

解決方案1 2 已采納 2015-05-05 23:40:33

解決方案2 1 2019-01-18 04:10:36

和javascript文件`ajaxexample.js`

解決方案1
2 已采納 2015-05-05 23:40:33

解決方案2
1 2019-01-18 04:10:36