将 JSON 发送到服务器并返回 JSON，无需 JQuery

Posted 2023-02-16

【中文标题】将 JSON 发送到服务器并返回 JSON，无需 JQuery

【英文标题】：Sending a JSON to server and retrieving a JSON in return, without JQuery

【发布时间】：2014-08-19 13:05:49

【问题描述】：

我需要向服务器发送一个 JSON（我可以对其进行字符串化）并在用户端检索生成的 JSON，而不使用 JQuery。

如果我应该使用 GET，我如何将 JSON 作为参数传递？会不会有太长的风险？

如果我应该使用 POST，如何在 GET 中设置等效于 onload 的函数？

或者我应该使用其他方法吗？

备注

这个问题不是关于发送一个简单的 AJAX。它不应该作为重复关闭。

【问题讨论】：

您需要使用XMLHttpRequest。尽管有这个名字，你可以将它用于 JSON 数据（这实际上是 jQuery 在后台执行它的方式）。

我会发布数据。看看这个：youmightnotneedjquery.com。它展示了如何使用 vanilla JS 获取/发布数据。

@Ed Cottrell 引用的问题与这个问题无关。参考是关于 (JUST) sending 一个 ajax 请求，这是一个非常普遍的事情。这个要求sending 但和receiving JSON 在纯javascript 中。此外，为了发回这个 JSON，您必须知道如何解决 server-side 上的这部分问题，这是引用问题中未提及的另一件事。

@Ed Cottrell 您提到的问题没有得到批准的答案，并使用旧方法创建 Ajax 请求。它没有提供这个问题的完整答案。我的问题比传统的 Ajax POST 或 GET 更微妙。你没抓住重点。

@JVerstry onreadystatechange 是您用来模拟 onload 的东西，如下面接受的答案所示。对于解析，您只需使用 JSON.parse() （再次，如答案所示），但我假设您已经知道这一点，因为您在问题中提到了字符串化。我试图通过向您指出涵盖这些要点的不是 1 个而是 2 个问题来帮助您。显然存在一些差异——很少有 2 个问题完全相同相同——但如果您已经知道如何对 JSON 进行字符串化和解析，这将是微不足道的。也就是说，既然你和@hex494D49 不同意，我提名这个重新开放。

【参考方案1】：

使用 POST 方法发送和接收 JSON 格式的数据

// Sending and receiving data in JSON format using POST method
//
var xhr = new XMLHttpRequest();
var url = "url";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () 
    if (xhr.readyState === 4 && xhr.status === 200) 
        var json = JSON.parse(xhr.responseText);
        console.log(json.email + ", " + json.password);
    
;
var data = JSON.stringify("email": "[e-mail]", "password": "101010");
xhr.send(data);

使用 GET 方法发送和接收 JSON 格式的数据

// Sending a receiving data in JSON format using GET method
//      
var xhr = new XMLHttpRequest();
var url = "url?data=" + encodeURIComponent(JSON.stringify("email": "[e-mail]", "password": "101010"));
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () 
    if (xhr.readyState === 4 && xhr.status === 200) 
        var json = JSON.parse(xhr.responseText);
        console.log(json.email + ", " + json.password);
    
;
xhr.send();

使用 php 在服务器端处理 JSON 格式的数据

<?php
// Handling data in JSON format on the server-side using PHP
//
header("Content-Type: application/json");
// build a PHP variable from JSON sent using POST method
$v = json_decode(stripslashes(file_get_contents("php://input")));
// build a PHP variable from JSON sent using GET method
$v = json_decode(stripslashes($_GET["data"]));
// encode the PHP variable to JSON and send it back on client-side
echo json_encode($v);
?>

HTTP Get 请求的长度限制取决于所使用的服务器和客户端（浏览器），从 2kB 到 8kB。如果 URI 比服务器可以处理的长，服务器应该返回 414 (Request-URI Too Long) 状态。

注意 有人说我可以用状态名代替状态值；换句话说，我可以使用 xhr.readyState === xhr.DONE 而不是 xhr.readyState === 4 问题是 Internet Explorer 使用不同的状态名称，因此最好使用状态值。

【讨论】：

应该是xhr.status === 200。

我使用相同的代码将 JSON 数据发布到托管在本地主机上的 REST API，但收到错误 XHR failed loading: POST

@viveksinghggits 首先，检查上面的代码是否在您的本地主机上工作。如果确实如此（并且应该可以），那么问题一定出在您的服务器端；如果没有，请告诉我，我会检查它。这样一来，没有你的代码，我帮不了你。

@hex494D49 非常感谢您的回复，当我将其更改为通过单击事件触发时，我实际上是在表单的提交操作上触发 XHR。我收到了 CORS 错误，这是可以理解的，我正在为此更改服务器端代码。我在这里写了medium.com/@viveksinghggits/…

【参考方案2】：

使用新的apifetch：

const dataToSend = JSON.stringify("email": "[e-mail]", "password": "101010");
let dataReceived = ""; 
fetch("", 
    credentials: "same-origin",
    mode: "same-origin",
    method: "post",
    headers:  "Content-Type": "application/json" ,
    body: dataToSend
)
    .then(resp => 
        if (resp.status === 200) 
            return resp.json()
         else 
            console.log("Status: " + resp.status)
            return Promise.reject("server")
        
    )
    .then(dataJson => 
        dataReceived = JSON.parse(dataJson)
    )
    .catch(err => 
        if (err === "server") return
        console.log(err)
    )

console.log(`Received: $dataReceived`)                

当服务器发送其他状态而不是 200(ok) 时，您需要处理，您应该拒绝该结果，因为如果您将其留空，它将尝试解析 json 但没有，因此会抛出错误

【讨论】：

您使用了两次JSON.stringify。