web-dev-qa-db-fra.com

Envoi d'un fichier JSON au serveur et récupération d'un fichier JSON en retour, sans JQuery

Je dois envoyer un fichier JSON (que je peux structurer) au serveur et récupérer le fichier JSON obtenu du côté utilisateur, sans utiliser JQuery.

Si je dois utiliser un GET, comment puis-je passer le JSON en tant que paramètre? Y a-t-il un risque que ce soit trop long?

Si je devais utiliser un POST, comment définir l'équivalent d'une fonction onload dans GET?

Ou devrais-je utiliser une méthode différente?

REMARQUE

Cette question ne concerne pas l'envoi d'un simple AJAX. Il ne devrait pas être fermé en double.

javascriptjsonpostgetxmlhttprequest
85
Jérôme Verstrynge

Envoi et réception de données au format JSON à l'aide de la méthode 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": "[email protected]", "password": "101010"});
xhr.send(data);

Envoi de données de réception au format JSON à l'aide de la méthode GET

// Sending a receiving data in JSON format using GET method
//      
var xhr = new XMLHttpRequest();
var url = "url?data=" + encodeURIComponent(JSON.stringify({"email": "[email protected]", "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();

Gestion des données au format JSON côté serveur à l'aide de 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);
?>

La limite de longueur d'une requête HTTP Get dépend du serveur et du client (navigateur) utilisé, de 2 Ko à 8 Ko. Le serveur doit renvoyer l'état 414 (Request-URI Too Long) si un URI est plus long que le serveur ne peut le gérer.

Note Quelqu'un a dit que je pouvais utiliser des noms d'état au lieu de valeurs d'état; en d'autres termes, je pourrais utiliser xhr.readyState === xhr.DONE au lieu de xhr.readyState === 4 Le problème est qu'Internet Explorer utilise des noms d'état différents, il est donc préférable d'utiliser des valeurs d'état.

173
hex494D49

Utiliser la nouvelle api fetch :

const dataToSend = JSON.stringify({"email": "[email protected]", "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);
            })
0
John Balvin Arias