Come inviare JSON invece di una stringa di query con $ .ajax?

172

Qualcuno può spiegare in modo semplice come fare in modo che jQuery invii JSON effettivo anziché una stringa di query?

$.ajax({
    url      : url,
    dataType : 'json', // I was pretty sure this would do the trick
    data     : data,
    type     : 'POST',
    complete : callback // etc
});

Questo infatti convertirà il tuo JSON preparato con cura in una stringa di query. Una delle cose fastidiose è che qualsiasi array: []oggetto nel tuo oggetto verrà convertito array[]: [], probabilmente a causa delle limitazioni della puntura della query.

— Redsandro
fonte

7

Non dataTypeha alcuna influenza sul modo in cui i dati vengono inviati. Specifica semplicemente quale tipo di dati è previsto che sia stato restituito dalla chiamata. Se si desidera indicare al server quale tipo di dati si sta specificando nella dataproprietà, è necessario impostare la contentTypeproprietà in modo simile acontentType: "application/json"

— No

Grazie per il chiarimento. Ma in tal caso, perché devo specificare il tipo di risposta lato client se il server fornisce un'intestazione del tipo di contenuto nella risposta?

— Redsandro,

2

Non è necessario specificarlo, per impostazione predefinita jQuery proverà a fare un'ipotesi intelligente basata sul tipo MIME della risposta. Tuttavia, specificandolo stai dicendo esplicitamente a jQuery quale tipo ti aspetti dal server e jQuery tenterà di convertire la risposta in un oggetto di quel tipo. Non specificarlo e lasciare jQuery a indovinare potrebbe comportare la conversione della risposta in un formato imprevisto, anche se JSON è stato inviato dal server. Controlla la documentazione per maggiori dettagli sul tipo di dati: api.jquery.com/jQuery.ajax

— No

Possibile duplicato di Jquery Ajax Posting json su webservice

— Madura Pradeep

256

È necessario utilizzare JSON.stringifyper serializzare innanzitutto l'oggetto su JSON, quindi specificare contentTypeciò in modo che il server comprenda che è JSON. Questo dovrebbe fare il trucco:

$.ajax({
    url: url,
    type: "POST",
    data: JSON.stringify(data),
    contentType: "application/json",
    complete: callback
});

Si noti che l' JSONoggetto è nativamente disponibile nei browser che supportano JavaScript 1.7 / ECMAScript 5 o versioni successive. Se hai bisogno del supporto legacy puoi usare json2 .

— mekwall
fonte

14

Questo non funzionerà, ti stai perdendo contentType: 'application/json'.

— Ohgodwhy,

@Ohgodwhy Oh yeah. È andato un po 'troppo in fretta;)

— Mekwall il

1

Grazie. Pensavo che DataType si occupasse di questo, ma l'ho fatto indietro. Qualche idea su come specificare charset nel tipo di contenuto come ha fatto Bergi nell'altra risposta?

— Redsandro,

5

@Redsandro Non dovrebbe essere necessario. Secondo i documenti di jQuery:POST data will always be transmitted to the server using UTF-8 charset, per the W3C XMLHTTPRequest standard

— Mekwall,

1

@ shorif2000 meglio tardi che mai ... il problema è che in $_POSTphp puoi solo vedere application/x-www-form-urlencoded, se vuoi leggere i dati json devi fare file_get_contents("php://input")e forse ajson_decode()

— santiago arizti

28

No, l' dataTypeopzione è per l'analisi dei dati ricevuti.

Per pubblicare JSON, dovrai scriverlo tu stesso tramite JSON.stringifye impostare l' processDataopzione su false.

$.ajax({
    url: url,
    type: "POST",
    data: JSON.stringify(data),
    processData: false,
    contentType: "application/json; charset=UTF-8",
    complete: callback
});

Si noti che non tutti i browser supportano l' JSONoggetto e sebbene jQuery abbia .parseJSON, non ha incluso il stringificatore; avrai bisogno di un'altra libreria polyfill.

— Bergi
fonte

4

L'impostazione processDatasu falsenon è necessaria poiché JSON.stringifyrestituisce già una stringa.

— Mekwall,

@MarcusEkwall: Afaik sarebbe ancora encodeURIComponented, vero?

— Bergi,

OK, potrebbe non essere necessario, ma pensi davvero che la richiesta fallirebbe?

— Bergi,

Non dovrebbe fallire, considerando che è già una stringa.

— Kevin B,

1

@Redsandro: Sì, sta facendo una "ipotesi intelligente". Tuttavia, il motivo del parametro non è (solo) che le persone vogliono renderlo rigoroso, ma più che non impostano i tipi MIME appropriati nelle loro risposte del server.

— Bergi,

5

Mentre conosco molte architetture come ASP.NET MVC hanno funzionalità integrate per gestire JSON.stringify come contentType, la mia situazione è un po 'diversa, quindi forse questo potrebbe aiutare qualcuno in futuro. So che mi avrebbe risparmiato ore!

Dato che le mie richieste http vengono gestite da un'API CGI di IBM (ambiente AS400) su un sottodominio diverso, queste richieste sono di origine incrociata, da cui il jsonp. In realtà invio il mio Ajax tramite oggetti javascript. Ecco un esempio del mio POST Ajax:

 var data = {USER : localProfile,  
        INSTANCE : "HTHACKNEY",  
        PAGE : $('select[name="PAGE"]').val(), 
        TITLE : $("input[name='TITLE']").val(), 
        HTML : html,
        STARTDATE : $("input[name='STARTDATE']").val(), 
        ENDDATE : $("input[name='ENDDATE']").val(),
        ARCHIVE : $("input[name='ARCHIVE']").val(), 
        ACTIVE : $("input[name='ACTIVE']").val(), 
        URGENT : $("input[name='URGENT']").val(), 
        AUTHLST :  authStr};
        //console.log(data);
       $.ajax({
            type: "POST",
           url:   "http://www.domian.com/webservicepgm?callback=?",
           data:  data,
           dataType:'jsonp'
       }).
       done(function(data){
         //handle data.WHATEVER
       });

— yardpenalty.com
fonte

2

Grazie per aver aggiunto ulteriori conoscenze a questa domanda! La risposta soddisfacente era già stata data, ma ho votato a favore della tua.

— Redsandro,

1

Se lo stai rimandando ad asp.net e hai bisogno dei dati in request.form [], dovrai impostare il tipo di contenuto su "application / x-www-form-urlencoded; charset = utf-8"

Post originale qui

In secondo luogo, eliminare il tipo di dati, se non si prevede un ritorno, il POST attenderà per circa 4 minuti prima di fallire. Vedi qui

— Tod
fonte