Javascript : Envoyer un objet JSON avec Ajax ?

Question

Est-ce possible ?

xmlHttp.send({
    "test" : "1",
    "test2" : "2",
});

Peut-être avec : un en-tête avec content type : application/json ? :

xmlHttp.setRequestHeader('Content-Type', 'application/json')

Sinon, je peux utiliser :

xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

et ensuite JSON.stringify l'objet JSON et l'envoyer dans un paramètre, mais ce serait cool de l'envoyer de cette façon si c'est possible.

Answer 1

Avec jQuery :

$.post("test.php", { json_string:JSON.stringify({name:"John", time:"2pm"}) });

Sans jQuery :

var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/json-handler");
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify({name:"John Rambo", time:"2pm"}));

Answer 2

Si vous n'utilisez pas jQuery, veuillez vous en assurer :

var json_upload = "json_name=" + JSON.stringify({name:"John Rambo", time:"2pm"});
var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/file.php");
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(json_upload);

Et pour la partie réceptrice de php :

 $_POST['json_name']

Answer 3

J'ai lutté pendant quelques jours pour trouver quelque chose qui fonctionne pour moi, car il fallait passer plusieurs tableaux d'identifiants et renvoyer un blob. Il s'avère que si vous utilisez .NET CORE, j'utilise la version 2.1, vous devez utiliser [FromBody] et comme vous ne pouvez l'utiliser qu'une seule fois, vous devez créer un modèle de vue pour contenir les données.

Rédigez le contenu comme ci-dessous,

var params = {
            "IDs": IDs,
            "ID2s": IDs2,
            "id": 1
        };

Dans mon cas, j'avais déjà jsoné les tableaux et passé le résultat à la fonction.

var IDs = JsonConvert.SerializeObject(Model.Select(s => s.ID).ToArray());

Ensuite, appelez le XMLHttpRequest POST et stringifiez l'objet

var ajax = new XMLHttpRequest();
ajax.open("POST", '@Url.Action("MyAction", "MyController")', true);
ajax.responseType = "blob";
ajax.setRequestHeader("Content-Type", "application/json;charset=UTF-8");           
ajax.onreadystatechange = function () {
    if (this.readyState == 4) {
       var blob = new Blob([this.response], { type: "application/octet-stream" });
       saveAs(blob, "filename.zip");
    }
};

ajax.send(JSON.stringify(params));

Alors ayez un modèle comme celui-ci

public class MyModel
{
    public int[] IDs { get; set; }
    public int[] ID2s { get; set; }
    public int id { get; set; }
}

Ensuite, passez dans l'action comme

public async Task<IActionResult> MyAction([FromBody] MyModel model)

Utilisez ce module complémentaire si vous renvoyez un fichier

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

Answer 4

Ajout de Json.stringfy autour du json qui a corrigé le problème