Passa più parametri alla chiamata jQuery ajax


99

Ho il seguente codice jquery per chiamare un metodo web in una pagina aspx

$.ajax({
    type: "POST",
    url: "popup.aspx/GetJewellerAssets",
    contentType: "application/json; charset=utf-8",
    data: '{"jewellerId":' + filter + '}',
    dataType: "json",
    success: AjaxSucceeded,
    error: AjaxFailed
});

ed ecco la firma del metodo web

[WebMethod]
public static string GetJewellerAssets(int jewellerId)
{

Funziona bene.

Ma ora ho bisogno di far passare due parametri al metodo web

il nuovo metodo web ha questo aspetto

[WebMethod]
public static string GetJewellerAssets(int jewellerId, string locale)
{
}

Come posso modificare il codice client per chiamare correttamente questa nuova firma del metodo?

MODIFICARE:

Le seguenti 2 sintassi hanno funzionato

data: '{ "jewellerId":' + filter + ', "locale":"en" }',

e

data: JSON.stringify({ jewellerId: filter, locale: locale }),

dove filtro e locale sono variabili locali


9
data: JSON.stringify({ jewellerId: filter, locale: locale })è il modo migliore che ho trovato, grazie a @ChrisCa
Frank Myat Gio

Se sei un'anima triste come me, potresti essere rimasto bloccato su questo per ore. Quando si utilizza JSON.stringifyun oggetto letterale, è NECESSARIO includere il nome del parametro con due punti, tutti racchiusi tra {}parentesi graffe. L'utilizzo JSON.stringify(objectLiteral)non funziona.
Kaleb Anderson

Firma del metodo come [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string TestIBAN(string ccc)?
Kiquenet

Risposte:


141

Non usare la concatenazione di stringhe per passare i parametri, usa solo un hash di dati:

$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',
    contentType: 'application/json; charset=utf-8',
    data: { jewellerId: filter, locale: 'en-US' },
    dataType: 'json',
    success: AjaxSucceeded,
    error: AjaxFailed
});

AGGIORNARE:

Come suggerito da @Alex nella sezione commenti, un PageMethod ASP.NET prevede che i parametri siano codificati in JSON nella richiesta, quindi JSON.stringifydovrebbe essere applicato all'hash dei dati:

$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ jewellerId: filter, locale: 'en-US' }),
    dataType: 'json',
    success: AjaxSucceeded,
    error: AjaxFailed
});

12
Considera anche l'utilizzo JSON.stringify( myObject )per creare una stringa JSON da un oggetto javascript, nel caso in cui desideri raggruppare i tuoi parametri in una classe in un secondo momento.
Alex Bagnolini

1
grazie per le risposte - tuttavia, ottengo uno stato http 500 quando lo provo in questo modo. Qualche idea? o anche come eseguirne il debug? Il punto di interruzione nel metodo web non viene mai colpito
ChrisCa

1
nuovo codice come segue $ .ajax ({type: 'POST', url: 'popup.aspx / GetJewellerAssets', contentType: 'application / json; charset = utf-8', data: {jewellerId: filter, locale: 'en -US '}, dataType: "json", successo: AjaxSucceeded, errore: AjaxFailed});
ChrisCa

1
Per eseguire il debug, prima guarda FireBug qual è la risposta esatta del server, quindi metti un punto di interruzione nel metodo del servizio web e vedi se viene raggiunto.
Darin Dimitrov

1
Il punto di interruzione nel metodo web non viene mai colpito Firebug mostra: "Message": "Invalid JSON primitive: jewellerId.", "StackTrace": "su System.Web.Script.Serialization Quindi immagino che la sintassi del json non sia corretta
ChrisCa

18
data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}',

1
ha funzionato: '{"jewellerId":' + filter + ', "locale": "en"}', (ovviamente non codificherò il locale in en, ma questa è la sintassi che ha funzionato.
ChrisCa

Questo ha funzionato per me con MVC 3. Non riuscivo a far funzionare il modo di Darin - forse è una cosa MVC 3.
fiat

7

aggiungi semplicemente tutte le proprietà necessarie all'oggetto dati.

 $.ajax({
                    type: "POST",
                    url: "popup.aspx/GetJewellerAssets",
                    contentType: "application/json; charset=utf-8",
                    data: {jewellerId: filter , foo: "bar", other: "otherValue"},
                    dataType: "json",
                    success: AjaxSucceeded,
                    error: AjaxFailed
                });

1
Come sarebbe la firma del metodo web in questo caso per leggere le proprietà datasul lato server?
Flo

5

Non utilizzare il metodo seguente per inviare i dati utilizzando la chiamata ajax

data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}'

Se per errore l'utente inserisce un carattere speciale come virgolette singole o doppie, la chiamata ajax fallisce a causa di una stringa sbagliata.

Utilizzare il metodo seguente per chiamare il servizio Web senza problemi

var parameter = {
       jewellerId: filter,
       locale : locale 
};


data: JSON.stringify(parameter)

Nel parametro precedente c'è il nome dell'oggetto javascript e lo stringa quando lo si passa all'attributo data della chiamata ajax.


3

Qualcun altro ha notato che la stringa / oggetto json non è valida in tutte le risposte ad eccezione di quella di David Hedlund? :)

Gli oggetti JSON devono essere formattati nel modo seguente: {"key": ("value" | 0 | false)}. Inoltre, scriverlo come una stringa richiede molto meno che stringere l'oggetto ...


3
$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',      
    data: "jewellerId=" + filter+ "&locale=" +  locale,  
    success: AjaxSucceeded,
    error: AjaxFailed
});

Funzionando anche usando il tipo: GET ?
Kiquenet

oppure puoi usare un array per passare i dati in jason.stringyfy (array).
Shekhar Patel

1

Solo per aggiungere [Questa riga funziona perfettamente in Asp.net e trova i campi di controllo web in jason Ad esempio: <% Fieldname%>]

 data: "{LocationName:'" + document.getElementById('<%=txtLocationName.ClientID%>').value + "',AreaID:'" + document.getElementById('<%=DropDownArea.ClientID%>').value + "'}",

1
    var valueOfTextBox=$("#result").val();
    var valueOfSelectedCheckbox=$("#radio:checked").val();

    $.ajax({
    url: 'result.php',
    type: 'POST',
    data: { forValue: valueOfTextBox, check : valueOfSelectedCheckbox } ,
    beforeSend: function() {

          $("#loader").show();
       },
    success: function (response) {
       $("#loader").hide();
       $("#answer").text(response);
    },
    error: function () {
        //$("#loader").show();
        alert("error occured");
    }
    }); 

0

È tutta una questione di dati che passi; deve essere una stringa formattata correttamente. Se stai passando dati vuoti, data: {} funzionerà. Tuttavia con più parametri deve essere formattato correttamente, ad es

var dataParam = '{' + '"data1Variable": "' + data1Value+ '", "data2Variable": "' + data2Value+ '"' +  '}';

....

data: dataParam

...

Il modo migliore per capire è avere un gestore degli errori con il parametro del messaggio appropriato, in modo da conoscere gli errori dettagliati.


0

Ho passato con successo più parametri usando json

data: "{'RecomendeeName':'" + document.getElementById('txtSearch').value + "'," + "'tempdata':'" +"myvalue" + "'}",

non passare mai i dati utente a un parametro senza prima "pulizia".
fcm
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.