将多个参数传递给jQuery ajax调用


99

我有以下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
});

这是网络方法签名

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

这很好。

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

新的网络方法如下所示

[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
Frank Myat

如果您是像我这样的悲伤灵魂,您可能已经在这个问题上停留了几个小时。JSON.stringify与对象文字一起使用时,必须在参数名称中包含一个冒号,并将其全部{}括在大括号内。使用JSON.stringify(objectLiteral)不起作用。
Kaleb Anderson

方法签名像 [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string TestIBAN(string ccc)
Kiquenet

Answers:


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 )如果以后要将参数分组到类,请考虑还使用从javascript对象创建JSON字符串。
亚历克斯·巴格诺利尼

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”,成功:AjaxSucceeded,错误:AjaxFailed});
克里斯卡

1
要进行调试,请首先查看FireBug服务器的确切响应是什么,然后在Web服务方法中放置一个断点,然后查看是否达到了。
Darin Dimitrov

1
Web方法中的断点永远不会命中Firebug显示:System.Web.Script.Serialization中的“消息”:“无效的JSON原语:jewellerId。”,“ StackTrace”:“”因此,我猜想json的语法不正确
ChrisCa

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

1
这工作:“{‘jewellerId’:” +过滤+“‘现场’:‘恩’}”,(当然我不会硬编码的语言环境为en,但是这是工作的语法
ChrisCa

这对我使用MVC 3很有用。我无法理解Darin的工作方式-也许是MVC 3。
2012年

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调用发送数据

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

如果用户错误地输入特殊字符(如单引号或双引号),则由于错误的字符串,ajax调用将失败。

使用下面的方法可以毫无问题地调用Web服务

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


data: JSON.stringify(parameter)

上面的参数是javascript对象的名称,并将其传递给ajax调用的data属性时对其进行字符串化。


3

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

JSON对象必须以以下方式设置格式:{“ key”:(“ value” | 0 | false)}。而且,将其写为字符串所需的内容远比将对象字符串化要简单得多。


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

也可以使用类型:GET
Kiquenet '16

或者您可以使用数组在jason.stringyfy(array)中传递数据。
Shekhar Patel

1

只是要添加[此行在Asp.net中非常有用,并且在jason中找到Web控件字段,例如:<%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

...

最好的理解方法是使用具有正确message参数的错误处理程序,以了解详细的错误。


0

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

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

永远不要在没有“清理”之前将用户数据传递给参数。
fcm
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.