Przekaż wiele parametrów do wywołania jQuery ajax

99

Mam następujący kod jquery do wywołania metody webmethod na stronie aspx

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

a tutaj jest podpis metody internetowej

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

To działa dobrze.

Ale teraz muszę uzyskać dwa parametry przekazane do metody internetowej

nowa metoda internetowa wygląda następująco

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

Jak zmienić kod klienta, aby pomyślnie wywołać tę nową sygnaturę metody?

EDYTOWAĆ:

Działały dwie następujące składnie

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

i

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

gdzie filtr i locale są zmiennymi lokalnymi

ChrisCa
źródło
9
data: JSON.stringify({ jewellerId: filter, locale: locale })to najlepszy sposób, jaki znalazłem, dziękuję @ChrisCa
Frank Myat Thu
Jeśli jesteś smutną duszą, tak jak ja, mógłbyś utknąć w tym na wiele godzin. Używając JSON.stringifyz literałem obiektu, MUSISZ podać nazwę parametru z dwukropkiem, wszystko w {}nawiasach klamrowych. Używanie JSON.stringify(objectLiteral)nie działa.
Kaleb Anderson
Podpis metody jak [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string TestIBAN(string ccc)?
Kiquenet

Odpowiedzi:

141

Nie używaj konkatenacji ciągów do przekazywania parametrów, po prostu użyj skrótu danych:

$.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
});

AKTUALIZACJA:

Zgodnie z sugestią @Alex w sekcji komentarzy, ASP.NET PageMethod oczekuje, że parametry w żądaniu będą zakodowane w formacie JSON, dlatego JSON.stringifynależy je zastosować do skrótu danych:

$.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
});
Darin Dimitrov
źródło
12
Rozważ również użycie JSON.stringify( myObject )do utworzenia ciągu JSON z obiektu javascript, na wypadek gdybyś chciał później zgrupować parametry w klasie.
Alex Bagnolini
1
dziękuję za odpowiedzi - jednak dostaję status http 500, kiedy próbuję w ten sposób. Jakieś pomysły? a nawet jak to debugować? Punkt
przerwania
1
nowy kod w następujący sposób $ .ajax ({type: 'POST', url: 'popup.aspx / GetJewellerAssets', contentType: 'application / json; charset = utf-8', data: {jewellerId: filter, locale: 'pl -US '}, dataType: "json", sukces: AjaxSucceeded, błąd: AjaxFailed});
ChrisCa
1
Aby debugować, najpierw spójrz na FireBug, jaka jest dokładna odpowiedź serwera, a następnie umieść punkt przerwania w metodzie usługi sieciowej i zobacz, czy został osiągnięty.
Darin Dimitrov
1
Punkt przerwania w metodzie sieciowej nigdy nie zostaje trafiony. Firebug pokazuje: "Message": "Nieprawidłowy element podstawowy JSON: jewellerId.", "StackTrace": "at System.Web.Script.Serialization Więc wydaje mi się, że składnia json jest nieprawidłowa
ChrisCa
18
data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}',
David Hedlund
źródło
1
to zadziałało: '{"jewellerId":' + filter + ', "locale": "en"}', (oczywiście nie będę zakodował locale na sztywno na en, ale to jest składnia, która działała.
zakodował na sztywno ChrisCa
To zadziałało dla mnie z MVC 3. Nie mogłem zmusić Darina do pracy - może to sprawa MVC 3.
fiat
7

po prostu dodaj tyle właściwości, ile potrzebujesz do obiektu danych.

 $.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
                });
pixeline
źródło
1
Jak wyglądałby podpis metody internetowej w tym przypadku, aby odczytać właściwości datapo stronie serwera?
Flo
5

Nie używaj poniższej metody do wysyłania danych przy użyciu wywołania ajax

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

Jeśli przez pomyłkę użytkownik wprowadzi znak specjalny, taki jak pojedynczy cudzysłów lub podwójny cudzysłów, wywołanie Ajax nie powiedzie się z powodu niewłaściwego ciągu.

Użyj poniższej metody, aby bez problemu wywołać usługę internetową

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


data: JSON.stringify(parameter)

W powyższym parametrze jest nazwa obiektu javascript i określamy go jako ciąg znaków podczas przekazywania go do atrybutu data wywołania ajax.

Sumit Jambhale
źródło
3

Czy ktoś jeszcze zauważył, że ciąg / obiekt json jest nieprawidłowy we wszystkich odpowiedziach z wyjątkiem Davida Hedlunda? :)

Obiekty JSON muszą być sformatowane w następujący sposób: {"klucz": ("wartość" | 0 | fałsz)}. Ponadto zapisanie tego jako ciągu wymaga znacznie mniej niż dodawanie znaków do obiektu ...

Ariel
źródło
3
$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',      
    data: "jewellerId=" + filter+ "&locale=" +  locale,  
    success: AjaxSucceeded,
    error: AjaxFailed
});
Justinonday
źródło
Pracujesz też z typem: GET ?
Kiquenet
lub możesz użyć tablicy do przekazywania danych w jason.stringyfy (tablica).
Shekhar Patel
1

Wystarczy dodać [Ta linia doskonale działa w Asp.net i znajdź pola kontroli sieci w jasonie Np .: <% Fieldname%>]

 data: "{LocationName:'" + document.getElementById('<%=txtLocationName.ClientID%>').value + "',AreaID:'" + document.getElementById('<%=DropDownArea.ClientID%>').value + "'}",
Milind bilonia
źródło
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");
    }
    }); 
Jasbir Rana
źródło
0

Chodzi o dane, które przekazujesz; musi mieć odpowiednio sformatowany ciąg. Jeśli przekazujesz puste dane, zadziała data: {}. Jednak przy wielu parametrach musi być odpowiednio sformatowany, np

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

....

data: dataParam

...

Najlepszym sposobem na zrozumienie jest posiadanie obsługi błędów z odpowiednim parametrem komunikatu, aby poznać szczegółowe błędy.

Subodh Patil
źródło
0

Pomyślnie przekazałem wiele parametrów za pomocą json

data: "{'RecomendeeName':'" + document.getElementById('txtSearch').value + "'," + "'tempdata':'" +"myvalue" + "'}",
user2739266
źródło
nigdy nie przekazuj danych użytkownika do parametru bez wcześniejszego „czyszczenia”.
fcm