将 JSON 发送到服务器并检索 JSON 作为回报,没有 JQuery

IT技术 javascript json post get xmlhttprequest
2021-02-11 04:38:14

我需要向服务器发送一个 JSON(我可以将其字符串化)并在用户端检索生成的 JSON,而不使用 JQuery。

如果我应该使用 GET,我如何将 JSON 作为参数传递?时间长了会有风险吗?

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

或者我应该使用不同的方法?

评论

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

2个回答

使用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": "hey@mail.com", "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": "hey@mail.com", "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
2021-03-14 04:38:14
@hex494D49 非常感谢您的回复,我实际上是在表单的提交操作上触发 XHR,当我将其更改为由单击事件触发时。我收到了 CORS 错误,这是可以理解的,我正在为此更改服务器端代码。我在这里写过它medium.com/@viveksinghggits/...
2021-03-28 04:38:14
我使用相同的代码将 JSON 数据发布到托管在本地主机上的 REST API,但出现错误 XHR failed loading: POST
2021-04-04 04:38:14
@viveksinghggits 首先,检查上面的代码是否适用于您的本地主机。如果确实如此(并且应该可以工作),那么问题一定出在您的服务器端;如果没有,请告诉我,我会检查一下。这样,没有你的代码,我帮不了你。
2021-04-09 04:38:14

使用新的 api fetch

const dataToSend = JSON.stringify({"email": "hey@mail.com", "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两次。
2021-03-30 04:38:14