Enviando um JSON para o servidor e recuperando um JSON em troca, sem JQuery


115

Preciso enviar um JSON (que posso sequenciar) para o servidor e recuperar o JSON resultante no lado do usuário, sem usar JQuery.

Se devo usar um GET, como passo o JSON como parâmetro? Existe o risco de demorar muito?

Se eu devo usar um POST, como faço para definir o equivalente a uma onloadfunção em GET?

Ou devo usar um método diferente?

OBSERVAÇÃO

Esta questão não é sobre o envio de um AJAX simples. Não deve ser fechado como duplicado.


Você precisa usar XMLHttpRequest. Apesar do nome, você pode usá-lo para dados JSON (e é assim que o jQuery faz em segundo plano).
elixenida

2
Eu postaria os dados. Dê uma olhada nisso: youmightnotneedjquery.com . Mostra como você pode obter / postar dados com vanilla JS.
HaukurHaf

1
@Ed Cottrell A pergunta mencionada não tem nada a ver com esta. A referência está considerando (APENAS) sendinguma solicitação ajax, que é uma coisa bastante geral. Este está pedindo sendingmas e receiving JSONem JavaScript puro. Além disso, para devolver este JSON, você tem que saber como resolver esta parte do problema no server-sideque é outra coisa não mencionada na questão referenciada.
hex494D49

1
@Ed Cottrell A questão à qual você se referiu não tem uma resposta aprovada e usa métodos antigos para criar a solicitação Ajax. Não fornece uma resposta completa a esta pergunta. Minha pergunta é mais sutil do que um POST ou GET tradicional do Ajax. Você perdeu o ponto.
Jérôme Verstrynge

1
@JVerstry onreadystatechangeé o que você usa para emular onload, conforme mostrado pela resposta aceita abaixo. Para analisar, você apenas usa JSON.parse()(novamente, conforme mostrado na resposta), mas eu estava assumindo que você já sabia disso, pois mencionou a stringificação na pergunta. Tentei ajudá-lo apontando-lhe não 1, mas 2 questões que abrangem esses pontos. Obviamente, há alguma diferença - raramente 2 questões são exatamente idênticas - mas é trivial se você já sabe como stringificar e analisar JSON. Dito isso, uma vez que você e @ hex494D49 discordam, estou nomeando isso para reabertura.
elixenida 01 de

Respostas:


221

Envio e recebimento de dados no formato JSON usando o método POST

// 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);

Envio e recebimento de dados no formato JSON usando o método GET

// 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();

Tratamento de dados em formato JSON no lado do servidor usando PHP

<?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);
?>

O limite de comprimento de uma solicitação HTTP Get depende do servidor e do cliente (navegador) usados, de 2kB a 8kB. O servidor deve retornar o status 414 (Request-URI Too Long) se um URI for maior do que o servidor pode suportar.

Observação Alguém disse que eu poderia usar nomes de estado em vez de valores de estado; em outras palavras, eu poderia usar em xhr.readyState === xhr.DONEvez de xhr.readyState === 4O problema é que o Internet Explorer usa nomes de estado diferentes, então é melhor usar valores de estado.


4
Deve ser xhr.status === 200.
qed

Estou usando o mesmo código para postar os dados JSON na API REST que está hospedada no localhost, mas estou recebendo o erroXHR failed loading: POST
viveksinghggits

@viveksinghggits Primeiro, verifique se o código acima funciona em seu host local. Se isso acontecer (e deve funcionar), o problema deve estar em algum lugar do servidor; se não, me avise e eu verificarei. Assim, não tendo nada do seu código, não posso te ajudar.
hex494D49

@ hex494D49 muito grato pela sua resposta, na verdade eu estava disparando o XHR na ação de envio do formulário, quando o alterei para ser disparado por um evento de clique em. Recebi o erro CORS, que é compreensível e estou mudando meu código do lado do servidor para isso. Eu escrevi sobre isso aqui medium.com/@viveksinghggits/...
viveksinghggits

6

Usando novo api fetch :

const dataToSend = JSON.stringify({"email": "hey@mail.com", "password": "101010"});
let dataReceived=""; 
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 =>{
                 dataReceived = JSON.parse(dataJson);
             })
              .catch(err =>{
                if(err=="server")return
                console.log(err);
            })
            
 console.log(`Received: ${dataReceived}`)                
Você precisa controlar quando o servidor envia outro status em vez de 200 (ok), você deve rejeitar esse resultado porque se você o deixasse em branco, ele tentaria analisar o json, mas não havia, então geraria um erro


1
Você está usando JSON.stringifyduas vezes.
Shukant Pal de
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.