作爲JSON發送表單數據 - 瀏覽器更改內容類型

我試圖創建一個HTML頁面，可以將表單數據以JSON的形式提交給服務器。我諮詢了答案this question和我使用下面的代碼來做到這一點：作爲JSON發送表單數據 - 瀏覽器更改內容類型

<head> 
    <title>Test</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://www.json.org/json2.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     var frm = $(document.myform); 
     var dat = JSON.stringify(frm.serializeArray()); 

     alert("I am about to POST this:\n\n" + dat); 

     $.ajax({ 
      type: "POST", 
      data: dat, 
      success: function(){}, 
      dataType: "json", 
      contentType : "application/json" 
     }); 
    }); 
    </script> 
</head> 

<body onload="javascript:document.myform.submit()"> 
<form action="http://www.foo.com/" method="post" name="myform"> 
    <input name="firstName" value="harry" /> 
    <input name="lastName" value="tester" /> 
    <input name="toEmail" value="[email protected]" /> 
</form>

不過，如果我使用打嗝代理工具攔截請求，我可以看到，由於某些原因，在Content-Type成爲application/x-www-form-urlencoded爲一旦請求離開瀏覽器。這裏的請求的截圖：

enter image description here

我想知道爲什麼會出現這種情況與要求？爲什麼瀏覽器在請求中改變Content-Type？有一個更好的方法嗎？ PS：我試過沒有jQuery（使用XHR，如解釋here）。

來源

2014-07-10 Rahil Arora

你的jQuery $.ajax請求沒有指定URL，所以它只是打你自己的網站，什麼都不做。同時，HTML中的onload="javascript:document.myform.submit()"屬性使用瀏覽器的常規表單提交，其實際上是application/x-www-form-urlencoded。

你可能想要做的是擺脫這個聲明，並使用jQuery的.submit來處理表單提交。您還希望在jQuery AJAX請求中指定URL。

嘗試這樣：

<head> 
    <title>Test</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://www.json.org/json2.js"></script> 
    <script type="text/javascript"> 
     $('#myform').submit(function() { 
     var frm = $(this); 
     var dat = JSON.stringify(frm.serializeArray()); 

     alert("I am about to POST this:\n\n" + dat); 

     $.ajax({ 
      type: "POST", 
      url: "http://www.foo.com/", 
      data: dat, 
      success: function(){}, 
      dataType: "json", 
      contentType : "application/json" 
     }); 
     }); 
    </script> 
</head> 

<body> 
    <form id="myform"> 
     <input name="firstName" value="harry" /> 
     <input name="lastName" value="tester" /> 
     <input name="toEmail" value="[email protected]" /> 
    </form> 
</body>

來源

2014-07-10 18:44:40 andrezsanchez

我看到我的代碼的問題。但是，我仍然無法發出POST請求，因爲瀏覽器禁止跨域請求。 –

沒錯，你可以用jsonp搞定，但是你需要修改服務器端代碼，以使 – user1572796

而且你是字符串化數組不是對象。下面是我會爲這個做：

<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
    //var frm = $(document.myform); 
    //var dat = JSON.stringify(frm.serializeArray()); 
    var dat = { 
     firstName: $('#firstName').val(), 
     lastName: $('#lastName').val(), 
     email: $('#email').val() 
    } 
    $('#myform').submit(function(e) { 
     $.ajax({ 
      datatype : "json", 
      contentType: "application/json; charset=utf-8", 
      type: "POST", 
      url: '/local-url-to-controller.php', 
      data: JSON.stringify(dat), 
      success: function() {}, 
      error: function() {}, 
     }); 
     // Stops browser refresh 
     e.preventDefault(); 
    }); 
    // Submit on document ready 
    $('#myform').submit(); 
}); 
</script> 
</head> 
<body> 
<form name="myform" id="myform"> 
    <input name="firstName" value="harry" id="firstName" /> 
    <input name="lastName" value="tester" id="lastName" /> 
    <input name="toEmail" value="[email protected]" id="email" /> 
</form> 
</body> 
</html>

如果您正在使用序列化形式的數據集，嘗試這樣的事情： Convert form data to JavaScript object with jQuery

來源

2014-07-10 18:54:35 user1572796

經過測試，並且這個工作正常，只需更新ajax中的url，你就可以開始。 – user1572796

它不會將數據發送到服務器。它只是發送一個OPTIONS請求到服務器，就是這樣。 –

什麼是來自服務器的OPTIONS請求的響應？如果服務器說它不接受Content-Type，那麼jQuery將不會繼續請求 – andrezsanchez

作爲JSON發送表單數據 - 瀏覽器更改內容類型

回答

相關問題