Senden eines JSON an den Server und Abrufen eines JSON im Gegenzug ohne JQuery


115

Ich muss einen JSON (den ich stringifizieren kann) an den Server senden und den resultierenden JSON auf der Benutzerseite abrufen, ohne JQuery zu verwenden.

Wie übergebe ich den JSON als Parameter, wenn ich ein GET verwenden sollte? Besteht das Risiko, dass es zu lang ist?

Wenn ich einen POST verwenden soll, wie setze ich das Äquivalent einer onloadFunktion in GET?

Oder sollte ich eine andere Methode verwenden?

ANMERKUNG

Bei dieser Frage geht es nicht darum, eine einfache AJAX zu senden. Es sollte nicht als Duplikat geschlossen werden.


Sie müssen verwenden XMLHttpRequest. Ungeachtet des Namens können Sie ihn für JSON-Daten verwenden (und genau so macht es jQuery im Hintergrund).
Elixenid

2
Ich würde die Daten veröffentlichen. Schauen Sie sich das an: youmightnotneedjquery.com . Es zeigt, wie Sie mit Vanilla JS Daten abrufen / veröffentlichen können.
HaukurHaf

1
@ Ed Cottrell Die referenzierte Frage hat nichts mit dieser zu tun. Die Referenz bezieht sich (NUR) auf sendingeine Ajax-Anfrage, was eine ziemlich allgemeine Sache ist. Dieser fragt sendingaber und receiving JSONin reinem JavaScript. Um diesen JSON zurückzusenden, müssen Sie außerdem wissen, wie Sie diesen Teil des Problems lösen können. Dies server-sideist eine andere Sache, die in der referenzierten Frage nicht erwähnt wird.
hex494D49

1
@Ed Cottrell Die Frage, auf die Sie verwiesen haben, hat keine genehmigte Antwort und verwendet alte Methoden zum Erstellen der Ajax-Anforderung. Es gibt keine vollständige Antwort auf diese Frage. Meine Frage ist subtiler als ein traditioneller Ajax POST oder GET. Sie haben den Punkt verpasst.
Jérôme Verstrynge

1
@JVerstry onreadystatechangeist das, was Sie zum Emulieren verwenden onload, wie aus der unten akzeptierten Antwort hervorgeht. Zum Parsen verwenden Sie einfach JSON.parse()(wieder wie in der Antwort gezeigt), aber ich ging davon aus, dass Sie das bereits wussten, seit Sie in der Frage das Stringifizieren erwähnt haben. Ich habe versucht, Ihnen zu helfen, indem ich Sie auf nicht 1, sondern 2 Fragen verwies, die diese Punkte abdecken. Es gibt offensichtlich einen Unterschied - selten sind 2 Fragen genau identisch -, aber es ist trivial, wenn Sie bereits wissen, wie man JSON stringifiziert und analysiert. Das heißt, da Sie und @ hex494D49 nicht einverstanden sind, nominiere ich dies für die Wiedereröffnung.
Elixenid

Antworten:


221

Senden und Empfangen von Daten im JSON-Format mithilfe der POST-Methode

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

Senden und Empfangen von Daten im JSON-Format mit der GET-Methode

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

Umgang mit Daten im JSON-Format auf der Serverseite mit 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);
?>

Die Begrenzung der Länge einer HTTP-Abrufanforderung hängt sowohl vom Server als auch vom verwendeten Client (Browser) von 2 KB bis 8 KB ab. Der Server sollte den Status 414 (Request-URI Too Long) zurückgeben, wenn ein URI länger ist, als der Server verarbeiten kann.

Hinweis Jemand sagte, ich könnte Statusnamen anstelle von Statuswerten verwenden. Mit anderen Worten, ich könnte xhr.readyState === xhr.DONEanstelle von verwenden. xhr.readyState === 4Das Problem ist, dass Internet Explorer unterschiedliche Statusnamen verwendet, daher ist es besser, Statuswerte zu verwenden.


4
Sollte sein xhr.status === 200.
Qed

Ich verwende den gleichen Code, um die JSON-Daten an die REST-API zu XHR failed loading: POST
senden

@viveksinghggits Überprüfen Sie zunächst, ob der obige Code auf Ihrem lokalen Host funktioniert. Wenn dies der Fall ist (und funktionieren sollte), muss das Problem irgendwo auf Ihrer Serverseite liegen. Wenn nicht, lass es mich wissen und ich werde es überprüfen. Auf diese Weise kann ich Ihnen nicht helfen, da ich nichts von Ihrem Code habe.
hex494D49

@ hex494D49 so dankbar für Ihre Antwort, dass ich tatsächlich die XHR für die Übermittlungsaktion des Formulars ausgelöst habe, als ich es so geändert habe, dass es durch ein Klickereignis ausgelöst wird. Ich habe den CORS-Fehler erhalten, der verständlich ist, und ich ändere dafür meinen serverseitigen Code. Ich schrieb hier darüber medium.com/@viveksinghggits/…
viveksinghggits

5

Verwenden des neuen API- Abrufs :

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);
            })
            
             
Sie müssen behandeln, wenn der Server einen anderen Status als 200 sendet (ok). Sie sollten dieses Ergebnis ablehnen, denn wenn Sie es leer lassen, wird versucht, den JSON zu analysieren, dies ist jedoch nicht der Fall, sodass ein Fehler ausgegeben wird


1
Sie verwenden JSON.stringifyzweimal.
Shukant Pal
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.