JQuery、ASMX 和格式化 JSON

Question

我有以下JS

  $('#Submit').click(function () {
            var name = $('#Name').val();
            var age = $('#Age').val();
            var phonenumber = $('#PhoneNumber').val();
            var isMale = $('#IsMale').val();
            var formdata = "'formdata':{name:'" + name + "',age:'" + age + "',phonenumber:'" + phonenumber + "',ismale:'" + isMale + "'}";
            $.ajax({
                type: "Post",
                url: "WebService/FormSubmission.asmx/SavePafForm",
                data: formdata,
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                processdata: true,
                success: function (msg) { alert(msg.d); },
                error: function (result, errortype, exceptionobject) { alert('Error:' + result.responseText); }

            })

我有以下asmx方法

 [WebMethod]
    public string SavePafForm(string formdata)
    {
        string test = formdata;

        return test;
    }

我收到以下错误

Error:{"Message":"Invalid JSON primitive: \u0027{name:\u0027tim\u0027,age:\u0027\u0027,phonenumber:\u0027\u0027,ismale:\u0027on\u0027}\u0027.","StackTrace":"   at System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String input, Int32 depthLimit, JavaScriptSerializer serializer)\r\n   at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n   at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n   at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n   at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n   at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.ArgumentException"}

当我将我的 json 字符串更改为此

var formdata = "{name:'" + name + "',age:'" + age + "',phonenumber:'" + phonenumber + "',ismale:'" + isMale + "'}";

和我的网络方法有这个签名

public string SavePafForm(string name, string age, string phonenumber, string ismale)

我没有收到任何错误。

我的目标是向该方法传递多达 20 个参数...我想将它作为一个我可以处理的对象传递，而不是方法签名中的 20 个参数。

有什么想法吗？

编辑：除了更改您的客户端 json 对象以执行此操作之外，执行标记的答案所说的所有操作

var formdata = JSON.stringify({ formdata: { name: $('#Name').val(), age: $('#Age').val(), phonnumber: $('#PhoneNumber').val(), ismale: $('#IsMale').val()} });

Answer 1

由于这个问题已得到正确回答，我不会再写一篇关于将对象类型接受到您的 Web 服务 [作为类或结构] 的帖子，而是提供有关构建要传递的对象的建议。

如果您在 JS 中构建对象以匹配它，那么跟踪您的属性会变得更加容易（IMO），所以：

//Multiple methods to create object Foo

function Foo (name, phoneNumber, age, isMale){
    this.name = name;
    this.phoneNumber = phoneNumber
    this.age = age;
    this.isMale = isMale;
}

var foo = new Foo("name","phoneNumber","age","isMale");

var foo = {}
    foo.name = "name";
    foo.phoneNumber = "phoneNumber";
    foo.age = "age";
    foo.isMale = "isMale";

var formData = "'formData':{'" + $.toJSON(foo) + "'}'"

$.ajax({
    type: "Post",
    url: "WebService/FormSubmission.asmx/SavePafForm",
    data: formdata,
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    processdata: true,
    success: function (msg) { alert(msg.d); },
    error: function (result, errortype, exceptionobject) { 
      alert('Error:' + result.responseText); 
    }
 });

Answer 2

所以，你可以定义一个类型：

public class Foo
{
    public string Name { get; set; }
    public string Age { get; set; }
    public string PhoneNumber { get; set; }
    public string IsMale { get; set; }
}

让您的网络方法将此对象作为参数：

[WebMethod]
public string SavePafForm(Foo foo)
{
    ...
}

然后调用：

$.ajax({
    type: 'POST',
    url: 'WebService/FormSubmission.asmx/SavePafForm',
    data: JSON.stringify({
        name: $('#Name').val(),
        age: $('#Age').val(),
        phoneNumber: $('#PhoneNumber').val(),
        isMale: $('#IsMale').val()
    }),
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    success: function (msg) { 
        alert(msg.d); 
    },
    error: function (result, errortype, exceptionobject) { 
        alert('Error:' + result.responseText); 
    }
});