logo标签列表

向jQuery ajax调用传递多个参数

asp.netjqueryajax
114
我有以下jQuery代码来调用一个aspx页面中的WebMethod：

我有以下jquery代码来调用aspx页面中的webmethod

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

这是Web方法的签名：

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

这个很好用。

但是现在我需要将两个参数传递给Web方法。

新的Web方法看起来像这样：

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

如何更改客户端代码以成功调用这个新的方法签名？
编辑：
以下两种语法都有效。
data: '{ "jewellerId":' + filter + ', "locale":"en" }',

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

其中filter和locale是本地变量

9
“data: JSON.stringify({ jewellerId: filter, locale: locale })”是我找到的最佳方式，感谢@ChrisCa。 - Frank Myat Thu
如果你和我一样是个悲伤的灵魂，你可能会被这个问题卡住好几个小时。当使用JSON.stringify与一个对象字面量一起使用时，你必须在大括号内包含参数名称和冒号。使用JSON.stringify(objectLiteral)是不起作用的。 - Kaleb Anderson
方法签名类似于 [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string TestIBAN(string ccc) 吗？ - Kiquenet
11个回答
159

不要使用字符串拼接来传递参数，而是使用数据哈希表：

$.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)将JavaScript对象转换为JSON字符串，以便稍后将参数分组到一个类中。 - Alex Bagnolini
1
谢谢回复。然而，当我尝试这样做时，我获得了一个HTTP状态500错误。有什么想法吗？或者甚至如何调试它？Web方法中的断点从未触发过。 - ChrisCa
1
新代码如下：$.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 }); - ChrisCa
1
调试时，首先查看FireBug服务器的确切响应，然后在Web服务方法中设置断点并查看是否已到达。 - Darin Dimitrov
1
Web方法中的断点从未被触发。Firebug显示：“消息”：“无效的JSON原语：jewellerId。”，“堆栈跟踪”：“在System.Web.Script.Serialization处所以我猜json的语法不正确。 - ChrisCa
1
如@Alex所建议的那样，您需要使用JSON.stringify，像这样: data: JSON.stringify({ jewellerId: 1, locale: 'en-US' }) - Darin Dimitrov
18
data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}',
1
这个代码行起作用： '{ "jewellerId":' + filter + ', "locale":"en" }'，（显然我不会将语言区域硬编码为英文，但这是成功的语法）。 - ChrisCa
这对我在MVC 3中起作用。我无法让Darin的方法起作用 - 可能是MVC 3的问题。 - fiat
8

只需向数据对象添加所需的属性即可。

 $.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
                });
2
在这种情况下，用于在服务器端读取data属性的WebMethod签名会是什么样子？ - Adam
7

不要使用以下方法来使用ajax调用发送数据

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

如果用户错误地输入特殊字符，例如单引号或双引号，那么由于字符串格式不正确，ajax调用将失败。

使用以下方法调用Web服务，避免出现问题

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


data: JSON.stringify(parameter)

在上述参数中，是javascript对象的名称并在将其传递到ajax调用的数据属性时进行字符串化。
5
$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',      
    data: "jewellerId=" + filter+ "&locale=" +  locale,  
    success: AjaxSucceeded,
    error: AjaxFailed
});
使用 type: GET 工作是否正常？ - Kiquenet
或者你可以使用数组在 jason.stringyfy(array) 中传递数据。 - Shekhar Patel
3
    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");
    }
    });
3

除了David Hedlund的回答外，有没有其他人注意到json字符串/对象在所有答案中都是无效的？ :)

JSON对象必须按照以下方式格式化：{"key": ("value" | 0 | false)}。此外，将其写成字符串比将对象字符串化需要更少的代码...

1

补充一下[这行在Asp.net中完美地工作，并在json中查找Web控件字段，例如：<%Fieldname%>]

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

这一切都与你传递的数据有关；必须是格式正确的字符串。 如果你传递的是空数据，那么 data: {} 就可以工作了。 然而，如果有多个参数，它必须被正确地格式化，例如：

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

....

数据：dataParam

...

理解编程最好的方法是使用带有适当消息参数的错误处理程序，以便了解详细的错误信息。

0

我成功地使用JSON传递了多个参数

data: "{'RecomendeeName':'" + document.getElementById('txtSearch').value + "'," + "'tempdata':'" +"myvalue" + "'}",
在将用户数据传递给参数之前，务必进行“清理”。 - fcm
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接