首页 > 解决方案 > Wordpress Ajax 调用成功(200)但没有响应消息

问题描述

我正在使用 Wordpress,将 AJAX 请求从我网站上的表单发送到我的服务器,但尽管状态为 200,但看不到响应消息。缺少什么?

页脚中的 JS

var ajaxurl = '<?php echo admin_url("admin-ajax.php"); ?>';
var data = [somedata]

fetch(ajaxurl, {
    method: 'POST',
    headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    dataType:'json',
    credentials: 'include',
    body: 'action=process_request&data='+data
}).then(function (result) {
    console.log(result);
});

PHP

add_action('wp_ajax_process_request', 'process_request');
add_action('wp_ajax_nopriv_process_request', 'process_request');

function process_request() {

    header("Content-type: application/json");
    //do something with data
    echo json_decode('my_response');
    die();
}

服务器的响应

Response {type: "basic", url: "https://myserver.xyz/wp-admin/admin-ajax.php", redirected: false, status: 200, ok: true, …}
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: ""
type: "basic"
url: "https://myserver.xyz/wp-admin/admin-ajax.php"
__proto__: Response

标签: phpjqueryajaxwordpress

解决方案


您在response.body中有响应正文。现在你有了关于响应的所有信息。

var ajaxurl = '<?php echo admin_url("admin-ajax.php"); ?>';
var data = [somedata]

fetch(ajaxurl, {
    method: 'POST',
    headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    dataType:'json',
    credentials: 'include',
    body: 'action=process_request&data='+data
}).then(result => result.json())
  .then(function (result) {
    console.log(result);
});

和发送响应函数:

add_action('wp_ajax_process_request', 'process_request');
add_action('wp_ajax_nopriv_process_request', 'process_request');

function process_request() {
    //do something with data
    echo json_decode('{"a":1,"b":2,"c":3,"d":4,"e":5}', true);

    wp_die();
}

你不能在这个地方设置标题,这不起作用。WordPress 有一个特殊的钩子。

在你的情况下:

add_action( 'send_headers', 'addHeader' );
function addHeader() {
    header("Content-type: application/json");
}

以前我忘记了将值转换为 JSON,所以我编辑了答案!

问候,梅子!

资料来源:

WordPress 标头钩子:https ://codex.wordpress.org/Plugin_API/Action_Reference/send_headers

获取 API:https ://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

获取响应文档:https ://developer.mozilla.org/en-US/docs/Web/API/Response


推荐阅读