在没有JQuery的情况下将JSON发送到服务器并获取JSON作为回报


115

我需要向服务器发送JSON(我可以对其进行字符串化),并在用户端检索得到的JSON,而无需使用JQuery。

如果我应该使用GET,如何将JSON作为参数传递?是否有太长的风险?

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

还是应该使用其他方法?

备注

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


您需要使用XMLHttpRequest。尽管有名称,您仍可以将其用于JSON数据(这实际上是jQuery在后台执行的方式)。
elixenide 2014年

2
我将发布数据。看看这个:youmightnotneedjquery.com。它显示了如何使用Vanilla JS获取/发布数据。
HaukurHaf 2014年

1
@Ed Cottrell所引用的问题与这一问题无关。该参考大约(只是)sending一个ajax请求,这是很普遍的事情。这一个要求sending,但和receiving JSON在纯JavaScript。此外,为了发回该JSON,您必须知道如何解决的问题的这一部分,而server-side这是所引用问题中未提及的另一件事。
hex494D49 2014年

1
@Ed Cottrell您提到的问题没有得到批准的答案,并且使用旧方法创建Ajax请求。它没有提供此问题的完整答案。我的问题比传统的Ajax POST或GET更为微妙。你错过了重点。
杰罗姆Verstrynge

1
@JVerstry onreadystatechange是您用来模拟的对象onload,如下面的接受的答案所示。对于解析,您仅使用JSON.parse()(再次如答案中所示),但是我假设您已经知道这一点,因为您在问题中提到了字符串化。我试图通过向您指出涉及这些问题的不是1个而是2个问题来帮助您。显然存在一些区别-很少有两个问题完全相同 -但如果您已经知道如何对JSON进行字符串化和解析,则这是微不足道的。就是说,由于您和@ hex494D49不同意,因此我提名这为重新开放。
elixenide 2014年

Answers:


221

使用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(请求URI太长)状态。

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


4
应该是xhr.status === 200
QED

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

@viveksinghggits首先,检查上面的代码是否在您的本地主机上有效。如果可以(并且应该可以工作),那么问题一定出在服务器端。如果没有,请告诉我,我会进行检查。这样,没有您的代码,我无能为力。
hex494D49

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

6

使用新的API 提取

const dataToSend = JSON.stringify({"email": "hey@mail.com", "password": "101010"});
let dataRecieved=""; 
fetch("",{credentials:'same-origin',mode:'same-origin',method:"post",body:dataToSend})
              .then(resp => {
                if(resp.status==200){
                   return resp.json()
                }else{
                    console.log("Status: "+resp.status);
                    return Promise.reject("server")
                }
              })
           .then(dataJson =>{
                 dataToRecieved = JSON.parse(dataJson);
             })
              .catch(err =>{
                if(err=="server")return
                console.log(err);
            })
            
             
您需要处理服务器何时发送其他状态而不是200(确定),您应该拒绝该结果,因为如果将其留为空白,它将尝试解析json但没有,因此将引发错误


1
您正在使用JSON.stringify两次。
Shukant Pal
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.