从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;
}

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

尝试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方法的属性,或者在使用.NET 4.0的情况下在web.config中设置相同的信息.

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

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

到了

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

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

我严格建议您不要使用手动序列化到JSON.例如,如果文本来自$('#myFirstName').val()或$('#myLastName').val()将包含'\n'或'\'字符,则必须使用附加反斜杠('\')转义字符(请参阅此处).而不是手动序列化,您应该使用JSON.stringify脚本json2中的函数.您可以从http://www.json.org/js.html或此处下载js .在最近的Web浏览器中,该函数是本机实现的,如果发生,json2.js将使用本机实现.

该data参数$.ajax可以改写为如下:

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()); }
}

有关更多信息,请参阅此旧答案,也可能是此.

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

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

我严格建议你只使用JSON.stringify我上面描述的版本.