动态通过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

例如这段代码是确定

是的，在这个具体的例子是好，因为你有对这些值进行了硬编码，但是代码隐藏了一个巨大的缺陷，并且这个缺陷负责您在使用动态值时遇到的问题。您不会编码您的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脚本。