Invio di un JSON al server e recupero di un JSON in cambio, senza JQuery


115

Devo inviare un JSON (che posso stringere) al server e recuperare il JSON risultante sul lato utente, senza utilizzare JQuery.

Se devo usare un GET, come faccio a passare il JSON come parametro? C'è il rischio che sia troppo lungo?

Se devo usare un POST, come imposto l'equivalente di una onloadfunzione in GET?

O dovrei usare un metodo diverso?

NOTA

Questa domanda non riguarda l'invio di un semplice AJAX. Non dovrebbe essere chiuso come duplicato.


Devi usare XMLHttpRequest. Nonostante il nome, puoi usarlo per i dati JSON (ed è così che jQuery lo fa in background).
elixenide

2
POSTARE i dati. Dai un'occhiata a questo: youmightnotneedjquery.com . Mostra come puoi ottenere / pubblicare dati con vanilla JS.
HaukurHaf

1
@Ed Cottrell La domanda a cui si fa riferimento non ha nulla a che fare con questa. Il riferimento sta prendendo circa (SOLO) sendinguna richiesta ajax, che è una cosa abbastanza generale. Questo richiede sendingma e receiving JSONin puro JavaScript. Inoltre, per restituire questo JSON, devi sapere come risolvere questa parte del problema sulla server-sidequale è un'altra cosa non menzionata nella domanda di riferimento.
hex494D49

1
@Ed Cottrell La domanda a cui hai fatto riferimento non ha una risposta approvata e utilizza vecchi metodi per creare la richiesta Ajax. Non fornisce una risposta completa a questa domanda. La mia domanda è più sottile di un tradizionale Ajax POST o GET. Hai perso il punto.
Jérôme Verstrynge

1
@JVerstry onreadystatechangeè ciò che usi per emulare onload, come mostrato dalla risposta accettata di seguito. Per l'analisi, devi solo usare JSON.parse()(di nuovo, come mostrato nella risposta), ma stavo assumendo che lo sapessi già da quando hai menzionato la stringa nella domanda. Ho cercato di aiutarti indicandoti non 1 ma 2 domande su questi punti. C'è ovviamente qualche differenza - raramente sono 2 domande esattamente identiche - ma è banale se sai già come stringere e analizzare JSON. Detto questo, poiché tu e @ hex494D49 non siete d'accordo, lo desidero per la riapertura.
elixenide

Risposte:


221

Invio e ricezione di dati in formato JSON utilizzando il metodo 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);

Invio e ricezione di dati in formato JSON utilizzando il metodo 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();

Gestione dei dati in formato JSON lato server tramite 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);
?>

Il limite della lunghezza di una richiesta HTTP Get dipende sia dal server che dal client (browser) utilizzati, da 2kB a 8kB. Il server dovrebbe restituire lo stato 414 (Request-URI Too Long) se un URI è più lungo di quanto il server possa gestire.

Nota Qualcuno ha detto che potevo usare nomi di stato invece dei valori di stato; in altre parole potrei usare al xhr.readyState === xhr.DONEposto di xhr.readyState === 4Il problema è che Internet Explorer utilizza nomi di stato diversi, quindi è meglio usare valori di stato.


4
Dovrebbe essere xhr.status === 200.
qed

Sto usando lo stesso codice per inviare i dati JSON all'API REST che è ospitata XHR failed loading: POST
sull'host

@viveksinghggits Innanzitutto, controlla se il codice sopra funziona sul tuo localhost. Se funziona (e dovrebbe funzionare), il problema deve essere da qualche parte sul lato server; in caso contrario, fammelo sapere e lo controllerò. In questo modo, non avendo nulla del tuo codice, non posso aiutarti.
hex494D49

@ hex494D49 sono così grato per la tua risposta, in realtà stavo sparando l'XHR sull'azione di invio del modulo, quando l'ho modificato per essere attivato da un evento clic su. Ho ricevuto l'errore CORS, che è comprensibile e sto cambiando il mio codice lato server per questo. Ne ho scritto qui medium.com/@viveksinghggits/…
viveksinghggits

6

Utilizzo del nuovo recupero API :

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}`)                
Devi gestire quando il server invia un altro stato invece di 200 (ok), dovresti rifiutare quel risultato perché se lo lasciassi vuoto, proverà ad analizzare il json ma non c'è, quindi genererà un errore


1
Stai usando JSON.stringifydue volte.
Shukant Pal
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.