Javascript: envoyer un objet JSON avec Ajax?

151

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')

puis JSON.stringifyl'objet JSON et envoyez-le dans un paramètre, mais ce serait cool de l'envoyer de cette manière si c'est possible.

— Adam
source

330

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"}));

— Nathan Romano
source

2

mais mec, je peux utiliser le type de contenu: application/x-www-form-urlencodedaussi si j'utilise stringify, quel est l'intérêt d'utiliser application/json? :)

— Adam

4

@CIRK: Qu'est-ce que c'est important? Le paramètre de type de contenu est complètement arbitraire, sauf si le serveur traite l'un ou l'autre spécialement. Ce ne sont que des données qui vont et viennent à la fin de la journée.

— mellamokb

17

Eh bien, si le corps de votre message est censé être JSON, par exemple ({name: "John", time: "2pm"}) utilisez le type de contenu application / json si le corps de votre message est sous forme de données codées par URL (name = John & time = 14pm) utilisez application / x-www-form-urlencoded

— Nathan Romano

1

où dois-je mettre l'URL?

— Aaron Liu du

6

@ShuruiLiu, une URL remplace en "/json-handler"tant que 2ème paramètre de la open()méthode

— Alexandr Nil

36

Si vous n'utilisez pas jQuery, assurez-vous que:

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 le destinataire de php:

 $_POST['json_name']

— shantanu chandra
source

Vous ne pouvez pas l'utiliser directement?

— rohitsakala

8

Je ne pense pas que cela réponde à la question posée. Je crois que le développeur veut envoyer un blob de JSON à PHP en tant que Content-Type: application / json, non enveloppé dans un wrapper urlencodé.

— Fordi

1

Ce n'est pas vraiment l'envoi de JSON, c'est l'envoi de données de formulaire. Vous pouvez également envoyer directement JSON, auquel cas vous ne pouvez pas le lire avec $ _POST, mais plutôt le lire avec json_decode (file_get_contents ('php: // input'));

— David

Chers amis, pouvez-vous partager cet ajax POST avec tout le code nécessaire à utiliser sur la page? Ou merci aussi si vous avez un lien aimable vers un exemple de travail complet de vanilla ajax POST avec JSON

— Robert

1

J'ai lutté pendant quelques jours pour trouver tout ce qui fonctionnait pour moi, comme passer plusieurs tableaux d'identifiants et renvoyer un blob. Il s'avère que si j'utilise .NET CORE J'utilise 2.1, vous devez utiliser [FromBody] et comme vous ne pouvez l'utiliser qu'une fois, vous devez créer un viewmodel pour contenir les données.

Récapitulez le contenu comme ci-dessous,

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

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

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

Appelez ensuite XMLHttpRequest POST et stringify 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; }
}

Passez ensuite en 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>

— Dave
source

0

Ajout Json.stringfyautour du json qui a résolu le problème

— user3310115
source