从jquery ajax GET将多个参数传递给.asmx

Question

html

<a onclick="testGetParametersDynamic2();">fill in names and check it out</a>
<br />
<p>Enter First Name</p>
<input id="myFirstName" type="text" />
<br />
<p>Enter Last Name</p>
<input id="myLastName" type="text" />
<div id="outputGET3"></div>

c#

[WebMethod(EnableSession = true)]
[ScriptMethod(UseHttpGet = true)]
public string testGetParametersDynamic(string firstName, string lastName)
{
    string fullName = firstName + lastName;

    return fullName;
}

我尝试了多种输入数据的方法，因为我认为这就是问题所在

尝试 1

function testGetParametersDynamic2()
    {
        $.ajax(
        {
            post: 'GET',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: '{"firstName":"' + $('#myFirstName').val() + '","lastName":' +
                    $('#myLastName').val() + '"}',
            url: 'UtilitieService.asmx/TestGetParametersDynamic',
            success: function (result)
            {
                var test = result.d;
                var outputDiv = $('outputGET3');
                outputDiv.html(test);
            },

            error: function ()
            {
                alert('Fail Test Get Dynamic');
            }
        });
    }

尝试 2：

function testGetParametersDynamic2()
    {
        $.ajax(
        {
            post: 'GET',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: "firstName" + $('myFirstName').val() + "&lastName" + $('myLastName').val(),
            url: 'UtilitieService.asmx/TestGetParametersDynamic',
            success: function (result)
            {
                var test = result.d;
                var outputDiv = $('outputGET3');
                outputDiv.html(test);
            },

            error: function ()
            {
                alert('Fail Test Get Dynamic');
            }
        });
    }

两次我都收到此错误：

无效的 Web 服务调用，缺少参数值：\u0027firstName\u0027

Answer 1

我希望您使用[ScriptMethod(ResponseFormat=ResponseFormat.Json)] 属性作为web 方法或在web.config 中设置相同的信息以防使用.NET 4.0。

在我看来你的第一次尝试几乎是正确的，但你应该替换

data: '{"firstName":"' + $('#myFirstName').val() + '","lastName":' +
                    $('#myLastName').val() + '"}',

到

data: '{"firstName":"' + $('#myFirstName').val() + '","lastName":"' +
                    $('#myLastName').val() + '"}',

（在$('#myLastName').val() 之前跳过了起始双引号）。

我强烈建议您不要对 JSON 使用手动序列化。例如，如果来自 $('#myFirstName').val() 或 $('#myLastName').val() 的文本将包含 '"' 或 '\' 字符，则必须使用额外的反斜杠 ('\') 对字符进行转义（请参阅here）。而不是手动序列化你应该使用脚本 json2.js 中的 JSON.stringify 函数，您可以从 http://www.json.org/js.html 或 here 下载该函数。在最近的 Web 浏览器中，该函数是本机实现的，如果发生，json2.js 会使用本机实现。

$.ajax 的data 参数可以改写如下：

data: {
    firstName: JSON.stringify($('myFirstName').val()),
    lastName: JSON.stringify($('myLastName').val())
}

或者在某些情况下甚至

data: {
    firstName: function() { return JSON.stringify($('myFirstName').val()); },
    lastName: function() { return JSON.stringify($('myLastName').val()); }
}

如需了解更多信息，请参阅this old answer，也可能还有this。

已更新：抱歉，没有使用 JSON.stringify 的正确版本可能没有使用数据：

url: 'UtilitieService.asmx/TestGetParametersDynamic?firstName=' +
     encodeURIComponent('"' + $('#myFirstName').val() + '"') +
     '&lastName=' + encodeURIComponent('"' + $('#myLastName').val() + '"')

我强烈建议您始终只使用我上面描述的JSON.stringify 版本。

Answer 2

• 您的第一次尝试是将参数作为 json 字符串传递。
• 您的第二次尝试缺少= 标志。

你可以给data传递一个对象，jQuery会正确序列化它。

$.ajax(
        {
            post: 'GET',
            data: {
                firstName: $('myFirstName').val(),
                lastName: $('myLastName').val()
            },
...

Answer 3

使用 json 传递多个参数

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