Javascript: inviare oggetto JSON con Ajax?

151

È possibile?

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

Forse con: un'intestazione con content type: application/json?:

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

Altrimenti posso usare:

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

e quindi JSON.stringifyl'oggetto JSON e inviarlo in un parametro, ma sarebbe bello inviarlo in questo modo, se possibile.

— Adamo
fonte

330

Con jQuery:

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

Senza 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
fonte

2

ma amico posso usare content-type: application/x-www-form-urlencodedanche se uso stringify, qual è il punto da usare application/json? :)

— Adam,

4

@CIRK: Che importa? L'impostazione del tipo di contenuto è completamente arbitraria a meno che il server non tratti l'uno o l'altro in modo speciale. Sono solo i dati che fluiscono avanti e indietro alla fine della giornata.

— mellamokb,

17

bene se il tuo post dovrebbe essere JSON ad es. ({name: "John", time: "2pm"}) usa il tipo di contenuto application / json se il tuo post post è formato da dati codificati (name = John & time = 2pm) usa application / x-www-form-urlencoded

— Nathan Romano,

1

dove devo inserire l'URL?

— Aaron Liu,

6

@ShuruiLiu viene inserito un URL "/json-handler"come secondo parametro del open()metodo

— Alexandr Nil,

36

Se non stai usando jQuery, assicurati di:

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

E per la ricezione php:

 $_POST['json_name']

— shantanu chandra
fonte

Non puoi usarlo direttamente?

— Rohitsakala,

8

Non credo che questo risponda alla domanda posta. Credo che lo sviluppatore voglia inviare un BLOB di JSON a PHP come Content-Type: application / json, non racchiuso in un wrapper codificato.

— Fordi,

1

Questo non sta davvero inviando JSON, ma sta inviando formdata. Puoi anche inviare JSON direttamente, nel qual caso non puoi leggerlo con $ _POST, ma invece leggilo con json_decode (file_get_contents ('php: // input'));

— David,

Cari amici, potete condividere questo ajax POST con l'intero codice necessario da utilizzare nella pagina? O grazie anche se hai un gentile link ad alcuni esempi di lavoro completo di POST di Vanilla Ajax con JSON

— Robert

1

Ho lottato per un paio di giorni per trovare qualcosa che potesse funzionare per me mentre passava più matrici di ID e restituiva un blob. Risulta se usando .NET CORE sto usando 2.1, devi usare [FromBody] e come posso usare solo una volta che devi creare un viewmodel per conservare i dati.

Riempi i contenuti come di seguito,

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

Nel mio caso avevo già json'd gli array e passato il risultato alla funzione

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

Quindi chiamare il POST XMLHttpRequest e stringere l'oggetto

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

Quindi avere un modello come questo

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

Quindi passa ad Azione come

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

Utilizzare questo componente aggiuntivo se si restituisce un file

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

— Dave
fonte

0

Aggiunta Json.stringfyintorno al json che ha risolto il problema

— user3310115
fonte