Invia dati JSON con jQuery

Perché il codice qui sotto ha inviato dati come City=Moscow&Age=25 anziché in formato JSON?

 var arr = {City:'Moscow', Age:25}; $.ajax( { url: "Ajax.ashx", type: "POST", data: arr, dataType: 'json', async: false, success: function(msg) { alert(msg); } } ); 

Perché non hai specificato né richiesta il tipo di contenuto, né correggere la richiesta JSON. Ecco il modo corretto per inviare una richiesta JSON:

 var arr = { City: 'Moscow', Age: 25 }; $.ajax({ url: 'Ajax.ashx', type: 'POST', data: JSON.stringify(arr), contentType: 'application/json; charset=utf-8', dataType: 'json', async: false, success: function(msg) { alert(msg); } }); 

Cose da notare:

  • Utilizzo del metodo JSON.stringify per convertire un object javascript in una stringa JSON che è nativa e integrata nei browser moderni. Se si desidera supportare i browser più vecchi, potrebbe essere necessario includere json2.js
  • Specifica del tipo di contenuto della richiesta utilizzando la proprietà contentType per indicare al server l’intenzione di inviare una richiesta JSON
  • dataType: 'json' proprietà dataType: 'json' viene utilizzata per il tipo di risposta che ci si aspetta dal server. jQuery è abbastanza intelligente da indovinarlo dall’intestazione di risposta Content-Type del server. Quindi se hai un server web che rispetta più o meno il protocollo HTTP e risponde con Content-Type: application/json alla tua richiesta jQuery analizzerà automaticamente la risposta in un object javascript nella callback di success modo da non dover specificare la proprietà dataType .

Cose da stare attenti a:

  • Quello che chiamate arr non è un array . È un object javascript con proprietà ( City ed Age ). Gli array sono indicati con [] in javascript. Ad esempio [{ City: 'Moscow', Age: 25 }, { City: 'Paris', Age: 30 }] è un array di 2 oggetti.

Perché per impostazione predefinita jQuery serializza oggetti passati come parametri di data in $.ajax . Usa $.param per convertire i dati in una stringa di query.

Dai documenti jQuery per $.ajax :

[l’argomento data ] viene convertito in una stringa di query, se non già una stringa

Se vuoi inviare JSON, dovrai codificarlo tu stesso:

 data: JSON.stringify(arr); 

Nota che JSON.stringify è presente solo nei browser moderni. Per il supporto legacy, guarda in json2.js

Ho scritto una breve funzione di convenienza per pubblicare JSON.

 $.postJSON = function(url, data, success, args) { args = $.extend({ url: url, type: 'POST', data: JSON.stringify(data), contentType: 'application/json; charset=utf-8', dataType: 'json', async: true, success: success }, args); return $.ajax(args); }; $.postJSON('test/url', data, function(result) { console.log('result', result); }); 

Viene serializzato in modo che l’URI possa leggere le coppie valore nome nella richiesta POST per impostazione predefinita. Potresti provare a impostare processData: false al tuo elenco di parametri. Non sono sicuro che sarebbe di aiuto.

È necessario impostare il tipo di contenuto corretto e stringificare l’object.

 var arr = {City:'Moscow', Age:25}; $.ajax({ url: "Ajax.ashx", type: "POST", data: JSON.stringify(arr), dataType: 'json', async: false, contentType: 'application/json; charset=utf-8', success: function(msg) { alert(msg); } });