Передача нескольких параметров в вызов jQuery ajax


99

У меня есть следующий код jquery для вызова веб-метода на странице aspx

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

и вот подпись веб-метода

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

Это прекрасно работает.

Но теперь мне нужно передать два параметра веб-методу

новый веб-метод выглядит так

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

Как изменить код клиента, чтобы успешно вызвать эту новую подпись метода?

РЕДАКТИРОВАТЬ:

Следующие 2 синтаксиса работали

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

и

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

где filter и locale - это локальные переменные


9
data: JSON.stringify({ jewellerId: filter, locale: locale })это лучший способ, который я каждый нашел, Спасибо @ChrisCa
Фрэнк Мьят Чт

Если ты такая же грустная душа, как я, возможно, ты застрял в этом на несколько часов. При использовании JSON.stringifyс литералом объекта вы ДОЛЖНЫ включать имя параметра в двоеточие, заключенное в {}фигурные скобки. Использование JSON.stringify(objectLiteral)не работает.
Калеб Андерсон

Подпись метода нравится [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string TestIBAN(string ccc)?
Kiquenet 04

Ответы:


141

Не используйте конкатенацию строк для передачи параметров, просто используйте хэш данных:

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

ОБНОВИТЬ:

Как было предложено @Alex в разделе комментариев, ASP.NET PageMethod ожидает, что параметры будут закодированы в JSON в запросе, поэтому JSON.stringifyих следует применять к хешу данных:

$.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
Также рассмотрите JSON.stringify( myObject )возможность создания строки JSON из объекта javascript, если вы хотите позже сгруппировать свои параметры в класс.
Alex Bagnolini

1
спасибо за ответы - однако я получаю http-статус 500, когда пытаюсь это сделать. Любые идеи? или еще как отладить? Точка останова в веб-методе никогда не достигается
ChrisCa

1
новый код выглядит следующим образом $ .ajax ({type: 'POST', url: 'popup.aspx / GetJewellerAssets', contentType: 'application / json; charset = utf-8', data: {jewellerId: filter, locale: 'en -US '}, dataType: "json", успех: AjaxSucceeded, ошибка: AjaxFailed});
ChrisCa

1
Для отладки сначала посмотрите в FireBug, каков точный ответ сервера, затем установите точку останова в методе веб-службы и посмотрите, достигнута ли она.
Дарин Димитров

1
Точка останова в веб-методе никогда не срабатывает. Firebug показывает: «Сообщение»: «Недействительный примитив JSON: jewellerId.», «StackTrace»: «в System.Web.Script.Serialization. Итак, я предполагаю, что синтаксис json неверен
ChrisCa

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

1
это сработало: '{"jewellerId":' + filter + ', "locale": "en"}', (очевидно, я не буду
жестко кодировать

Это сработало для меня с MVC 3. Я не мог заставить Дарина работать - возможно, это вещь MVC 3.
fiat

7

просто добавьте к объекту данных столько свойств, сколько вам нужно.

 $.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
Как в этом случае будет выглядеть подпись веб-метода для считывания свойств dataна стороне сервера?
Flo

5

НЕ используйте приведенный ниже метод для отправки данных с помощью вызова ajax.

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

Если по ошибке пользователь вводит специальный символ, например одинарную или двойную кавычку, вызов ajax завершается ошибкой из-за неправильной строки.

Используйте метод ниже для вызова веб-службы без каких-либо проблем

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


data: JSON.stringify(parameter)

В приведенном выше параметре указано имя объекта javascript и преобразование его в строку при передаче в атрибут данных вызова ajax.


3

Кто-нибудь еще заметил, что строка / объект json недействительны во всех ответах, кроме Дэвида Хедлунда? :)

Объекты JSON должны быть отформатированы следующим образом: {"key": ("value" | 0 | false)}. Кроме того, для записи его в виде строки требуется гораздо меньше, чем преобразование объекта в строку ...


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

Тоже работает с типом: GET ?
Kiquenet 04

или вы можете использовать массив для передачи данных в jason.stringyfy (массив).
Шекхар Патель

1

Просто добавьте [Эта строка отлично работает в Asp.net и найдите поля веб-управления в jason Eg: <% 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

Все дело в данных, которые вы передаете; должна правильно отформатированная строка. Если вы передаете пустые данные, данные: {} будут работать. Однако с несколькими параметрами он должен быть правильно отформатирован, например

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

....

данные: dataParam

...

Лучший способ понять это - иметь обработчик ошибок с правильным параметром сообщения, чтобы знать подробные ошибки.


0

Я успешно передал несколько параметров с помощью json

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

никогда не передавайте пользовательские данные в параметр без предварительной очистки.
fcm
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.