Передайте кілька параметрів для виклику 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 }),

де фільтр і локал - локальні змінні


9
data: JSON.stringify({ jewellerId: filter, locale: locale })це найкращий спосіб, який я знайшов, дякую @ChrisCa
Frank Myat Чт

Якщо ти сумна душа, як я, ти, можливо, затримався на цьому годинами. Під час використання JSON.stringifyз об'єктом літералом, ВИ ОБ'ЄДНАТО включити ім'я параметра з двокрапкою, всі загорнуті всередині {}дужок. Використання JSON.stringify(objectLiteral)не працює.
Калеб Андерсон

Метод підпису, як [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string TestIBAN(string ccc)?
Кікенет

Відповіді:


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, якщо ви хочете згодом згрупувати параметри до класу.
Алекс Багноліні

1
дякую за відповіді - однак, я отримую http-статус 500, коли я пробую це. Якісь ідеї? чи навіть як це налагодити? Точка розриву у веб-методі ніколи не потрапляє
ChrisCa

1
новий код наступним чином. -US '}, dataType: "json", успіх: AjaxSucceeded, помилка: AjaxFailed});
ChrisCa

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

1
Точка розриву у веб-методі ніколи не потрапляє на показ Firebug: "Message": "Недійсний примітив JSON: jewellerId.", "StackTrace": "на System.Web.Script.Serialization Тож я думаю, що синтаксис json невірний
ChrisCa


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
Як виглядатиме підпис webmethod у цьому випадку для читання властивостей dataна стороні сервера?
Flo

5

НЕ використовуйте наведений нижче метод для надсилання даних за допомогою ajax call

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 ?
Кікенет

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

1

Просто для додання [Цей рядок ідеально працює на Asp.net та знаходити поля керування веб-контролем у Джейсоні Напр .: <% Назва поля%>]

 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.