Skip to main content
 首页 » 编程设计

javascript之Wordpress ajax 调用返回整个 html 页面

2025年05月04日144shanyou

我正在将一个网络应用程序迁移到我的 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 请求?

请您参考如下方法:

您的网址不应该如下:
ajax_object.ajax_url
而不是:
ajax_object.ajaxurl