動態通過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腳本。