将JSON发送到服务器并在没有JQuery的情况下检索JSON

时间:2014-06-28 15:46:04

标签: javascript json post get xmlhttprequest

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

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

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

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

REMARK

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

2 个答案:

答案 0 :(得分:163)

使用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使用不同的状态名称,因此最好使用状态值。

答案 1 :(得分:0)

使用新的API fetch

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但没有,因此将引发错误