asp.net - 通过 jQuery Ajax 动态从客户端表单传递数据

Question

我想插入在数据库中的表单文本框中输入的成员规范。当我使用静态值调用 webmethod 时，我使用 jQuery Ajax 执行此操作。操作成功。例如，下面的代码就可以:

 $.ajax({
     type: "POST",
     url:"MethodInvokeWithJQuery.aspx/executeinsert",
     data: '{ "username": "user1", "name":"john","family":"michael","password":"123456","email": "email@yahoo.com", "tel": "123456", "codemeli": "123" }',
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     async: true,
     cache: false,
     success: function (msg) {
         $('#myDiv2').text(msg.d);
     },
     error: function (x, e) {
         alert("The call to the server side failed. " + x.responseText);
     }
 }
 );

但是当我想使用动态输入文本框中的值时，会发生错误。什么问题？我尝试了以下两个代码块。

<script type="text/javascript">
    $(document).ready(
    function () {
        $("#Button1").click(
            function () {
                var username, family, name, email, tel, codemeli, password;
                username = $('#<%=TextBox1.ClientID%>').val();
                name = $('#<%=TextBox2.ClientID%>').val();
                family = $('#<%=TextBox3.ClientID%>').val();
                password = $('#<%=TextBox4.ClientID%>').val();
                email = $('#<%=TextBox5.ClientID%>').val();
                tel = $('#<%=TextBox6.ClientID%>').val();
                codemeli = $('#<%=TextBox7.ClientID%>').val();

                $.ajax(
                {
                    type: "POST",
                    url: "WebApplication20.aspx/executeinsert",
                    data: "{'username':'username','name':name,
                            'family':family,'password':password,
                            'email':email,'tel':tel,
                            'codemeli':codemeli}",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    async: true,
                    cache: false,
                    success: function(msg) {
                        alert(msg);
                    },
                    error: function (x, e) {
                        alert("The call to the server side failed. "
                              + x.responseText);
                    }
                }
            );
        }
        )
     })
 </script>

和

$(document).ready(
    function () {
        $("#Button1").click(
            function () {
                var username, family, name, email, tel, codemeli, password;
                username = $('#<%=TextBox1.ClientID%>').val();
                name = $('#<%=TextBox2.ClientID%>').val();
                family = $('#<%=TextBox3.ClientID%>').val();
                password = $('#<%=TextBox4.ClientID%>').val();
                email = $('#<%=TextBox5.ClientID%>').val();
                tel = $('#<%=TextBox6.ClientID%>').val();
                codemeli = $('#<%=TextBox7.ClientID%>').val();

                $.ajax(
                {
                    type: "POST",
                    url: "WebApplication20.aspx/executeinsert",
                    data: '{"username" : '+username+', "name": '+name+', "family":     '+family+',
                    "password": '+password+', "email": '+email+', "tel": '+tel+' ,
                    "codemeli": '+codemeli+'}'
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    async: true,
                    cache: false,
                    success: function(msg) {
                        alert(msg);
                    },
                    error: function (x, e) {
                        alert("The call to the server side failed. "
                              + x.responseText);
                    }
                }
        );
    }
    )
})

这里的错误内容是:

{"Message":"Invalid JSON primitive: myname.","StackTrace":" at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()
 at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32 depth)
 at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeDictionary(Int32 depth)
 at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32 depth)
 at System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String input, Int32 depthLimit, JavaScriptSerializer serializer)
 at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)
 at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)
 at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)
 at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)
 at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.ArgumentException"}

Answer 1

for example this code is ok

是的，在这个特定的示例中，这是可以的，因为您已经对值进行了硬编码，但是代码隐藏了一个巨大的缺陷，而这个缺陷是您在使用动态值时遇到的问题的原因。您不对 JSON 请求值进行编码。当您想要插入动态值时就会发生这种情况。例如，如果名称中有一些特殊字符，您的 JSON 就会中断，因为您使用了字符串连接。你绝对不应该这样做。您应该使用 JSON.stringify 函数并替换以下恐怖内容:

data: '{"username" : '+username+', "name": '+name+', "family":     '+family+',
            "password": '+password+', "email": '+email+', "tel": '+tel+' , 
            "codemeli": '+codemeli+'}'

与:

data: JSON.stringify({ 
    username: username, 
    name: name, 
    family: family,
    password: password, 
    email: email, 
    tel: tel, 
    codemeli: codemeli 
})

现在您的所有请求参数都将被正确编码。 JSON.stringify 方法原生内置于所有现代浏览器中。但如果您需要支持一些非常旧的浏览器，您可能需要包含 json2.js脚本。