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

Posted 2023-05-08

【中文标题】将多个参数传递给 jQuery ajax 调用

【英文标题】：Pass Multiple Parameters to jQuery ajax call

【发布时间】：2010-12-27 08:13:04

【问题描述】：

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

如何更改客户端代码以成功调用此新方法签名？

编辑：

以下两种语法有效

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

和

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

filter 和 locale 是局部变量

【问题讨论】：

data: JSON.stringify( jewellerId: filter, locale: locale ) 是我发现的最好的方法，谢谢@ChrisCa

如果你像我一样是个悲伤的人，你可能会被困在这个问题上好几个小时。将JSON.stringify 与对象文字一起使用时，您必须包含带有冒号的参数名称，所有参数名称都包含在 大括号内。使用JSON.stringify(objectLiteral) 不起作用。

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

【参考方案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
);

---

更新：

正如@Alex 在 cmets 部分中所建议的那样，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
);

【讨论】：

考虑使用 JSON.stringify( myObject ) 从 javascript 对象创建 JSON 字符串，以防您稍后想将参数分组到一个类中。

感谢您的回复 - 但是，当我这样尝试时，我得到一个 http 状态 500。有任何想法吗？甚至如何调试它？ Web 方法中的断点永远不会被命中

新代码如下 $.ajax( type: 'POST', url: 'popup.aspx/GetJewellerAssets', contentType: 'application/json; charset=utf-8', data: JewellerId:filter,locale:'en-US', dataType: "json", 成功: AjaxSucceeded, 错误: AjaxFailed );

调试，先看FireBug服务器的具体响应是什么，然后在web服务方法中打断点，看是否到达。

Web 方法中的断点永远不会被击中 Firebug 显示：“消息”：“无效 JSON 原语：jewellerId。”，“StackTrace”：“在 System.Web.Script.Serialization 所以我猜语法json的不正确

【参考方案2】：

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

【讨论】：

这行得通：' "jewellerId":' + filter + ', "locale":"en" ', （显然我不会将语言环境硬编码为 en，但这是有效的语法。

这对我来说适用于 MVC 3。我无法使用 Darin 的工作方式 - 也许它是 MVC 3 的东西。

【参考方案3】：

只需向数据对象添加任意数量的属性即可。

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

【讨论】：

在这种情况下，在服务器端读取data 中的属性时，webmethod 签名会是什么样子？

【参考方案4】：

不要使用下面的方法通过ajax调用发送数据

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

如果用户误输入了单引号或双引号等特殊字符 由于错误的字符串，ajax 调用失败。

使用下面的方法调用Web服务没有任何问题

var parameter = 
       jewellerId: filter,
       locale : locale 
;


data: JSON.stringify(parameter)

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

【参考方案5】：

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

JSON 对象必须按以下方式格式化："key": ("value" | 0 | false)。此外，将其写成字符串比将对象字符串化要少得多...

【参考方案6】：

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

【讨论】：

也可以使用 type: GET ?

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

【参考方案7】：

    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");
    
    ); 

【参考方案8】：

只需添加 [此行在 Asp.net 中完美运行&在 jason 中查找 web-control 字段例如：]

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

【参考方案9】：

这一切都与您传递的数据有关；必须正确格式化字符串。 如果您传递空数据，则 data: 将起作用。 但是，对于多个参数，它必须正确格式化 例如

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

....

数据：数据参数

...

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

【参考方案10】：

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

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

【讨论】：

在没有“清理”之前，永远不要将用户数据传递给参数。

【参考方案11】：

            data: JSON.stringify( "objectnameOFcontroller": data, "Sel": $(th).val() ),

控制器对象名称