ASP.NET Web 窗体 jQuery AJAX 将多个参数传递给 Web 方法

Question

我在后面的代码中调用一个 Web 方法，方法签名接受了 4 个以上的字符串。我正在创建一个 params 变量并使用它来添加我想要传递给该方法的所有输入字段。

                var params = {
                    showStartDate: showStartDate,
                    showEndDate: showEndDate,
                    arrivalDate: arrivalDate,
                    pickUpDate: pickUpDate
                };

然后如何在我的 AJAX 调用中传递“参数”？下面是我当前的代码，它似乎不起作用。我不想在数据部分显式传递每个参数。

                $.ajax({
                    type: "POST",
                    url: "OrderSummary.aspx/JSONUpdateOrder",
                    async: false,
                    data: "{'" + params + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(data) {
                    }
                });

Answer 1

这是我的代码中的一个示例：

您看到的 JSON 函数的链接 (http://www.json.org/js.html)

var selected = $("#ddPackageContainerType option:selected");    
var DTO =  JSON.stringify({ sContainerType: selected.val(), sLocation: '<%=Location%>' });

                    $.ajax({
                        data: DTO,
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        url:"helpers/packinguiservice.asmx/GetContainerDetail",

                        success: function (data, textStatus) {
                            var oContainerDetail = JSON.parse(data);

                            //Fill In All the data returned
                            $('#txtPackageLength').val(parseFloat(oContainerDetail.Length).toFixed(1));
                            $('#txtPackageWidth').val(parseFloat(oContainerDetail.Width).toFixed(1));
                            $('#txtPackageHeight').val(parseFloat(oContainerDetail.Height).toFixed(1));
                            $('#ddPackageDimensionsUOM').val(oContainerDetail.LengthUOM);
                            $('#txtPackageWeight').val(parseFloat(oContainerDetail.PackageWeight).toFixed(1));

                            hideInfoOverlay(); 
                        },
                        error: function(objXMLHttpRequest, textStatus, errorThrown) {
                            //Show Error
                            hideInfoOverlay();
                            showErrorOverlay(' ' + objXMLHttpRequest.responseText);    
                        }
                    });

以及对应的WebMethod：

<WebMethod()> _
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
    Public Function GetContainerDetail(ByVal sContainerType As String, ByVal sLocation As String) As String
        Dim oPackageInfo As New Dictionary(Of String, String)()
        Dim oPackage As Pacejet.Base.Package

        Try
            AppStatic.MyLocation = sLocation

            oPackage = Pacejet.Base.Package.GetPackageByKey(sContainerType)
            If Not oPackage Is Nothing Then
                oPackageInfo.Add("Length", oPackage.Length.Value)
                oPackageInfo.Add("Width", oPackage.Width.Value)
                oPackageInfo.Add("Height", oPackage.Height.Value)
                oPackageInfo.Add("LengthUOM", oPackage.LengthUOM.Value)
                oPackageInfo.Add("PackageWeight", oPackage.StandardWeight.Value)
            End If

        Catch ex As Exception
            Throw New HttpException(System.Net.HttpStatusCode.InternalServerError, ex.Message)
        End Try

        Return New JavaScriptSerializer().Serialize(oPackageInfo)
    End Function

Answer 2

我认为您所缺少的只是使用JSON.stringify(data) 将您的参数序列化为 JSON。

一些浏览器，如 FF3+ 和 IE8，原生实现 JSON.stringify。其他人需要引用http://json.org/json2.js（当然托管在您自己的域上）。

另外，尝试使用从选项中删除 async:false - 也许它没有影响，但我从未使用过它。

最后一件事：您的网络方法 URL 真的是 OrderSummary.aspx/JSONUpdateOrder 吗？会不会是 '.asmx' 而不是 '.aspx'？

编辑：使用fiddler 查看服务器返回的响应（如果有）。

Answer 3

您可以传递参数本身，而不需要括号。

var params = 
{
  "showStartDate": showStartDate,
  "showEndDate": showEndDate,
  "arrivalDate": arrivalDate,
  "pickUpDate": pickUpDate
};

$.ajax({
  type: "POST",
  url: "OrderSummary.aspx/JSONUpdateOrder",
  async: false,
  data: params,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(data) {
  }
});

Answer 4

以简单的方式尝试这段代码的工作

function ShowAvailability() {
    $.ajax({
        type: "POST",
        url: "CS.aspx/CheckUserName",
        data: '{userName: "' + $("#<%=txtUserName.ClientID%>")[0].value + '",userName1: "' + $("#<%=TextBox1.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function(response) {
            alert(response);
        }
    });
}