如何使用HTML表單數據發送一個JSON對象

所以我有了這個HTML表單：如何使用HTML表單數據發送一個JSON對象

<html> 
<head><title>test</title></head> 
<body> 
    <form action="myurl" method="POST" name="myForm"> 
     <p><label for="first_name">First Name:</label> 
     <input type="text" name="first_name" id="fname"></p> 

     <p><label for="last_name">Last Name:</label> 
     <input type="text" name="last_name" id="lname"></p> 

     <input value="Submit" type="submit" onclick="submitform()"> 
    </form> 
</body> 
</html>

這將是當填寫此表的數據作爲JSON對象到我的服務器的用戶的最簡單方法點擊提交？

更新：我就這樣走了，但它似乎不工作：

<script type="text/javascript"> 
    function submitform(){ 
     alert("Sending Json"); 
     var xhr = new XMLHttpRequest(); 
     xhr.open(form.method, form.action, true); 
     xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
     var j = { 
      "first_name":"binchen", 
      "last_name":"heris", 
     }; 
     xhr.send(JSON.stringify(j));

我在做什麼錯？

來源

2014-03-05 kstratis

查看jQuery API中的'.ajax'和['serialize']（http://api.jquery.com/serialize/）。 –

它絕對必須是JSON對象嗎？對象有什麼結構？ –

@AnthonyGrist是的，它必須是JSON，因爲它是針對ReST服務的。 – kstratis

以數組形式獲取完整的表單數據並將json字符串化。

var formData = JSON.stringify($("#myForm").serializeArray());

您可以稍後在ajax中使用它。或者如果你不使用ajax;把它放在隱藏的textarea並傳遞給服務器。如果這個數據是通過正常形式的數據作爲json字符串傳遞的，那麼你必須使用json_decode來解碼它。然後，您將獲得數組中的所有數據。

$.ajax({ 
    type: "POST", 
    url: "serverUrl", 
    data: formData, 
    success: function(){}, 
    dataType: "json", 
    contentType : "application/json" 
});

來源

2014-03-05 10:35:07 SachinGutte

請參閱更新 – kstratis

您已使用jQuery標記問題。那麼你使用它？用'.ajax'來傳遞這些數據是非常簡單的。 – SachinGutte

我試過了，但是JQuery和javascript似乎都不起作用... – kstratis

HTML不提供從表單數據生成JSON的方法。

如果你真的想從客戶端處理它，那麼你將不得不訴諸使用JavaScript來：通過DOM

從表單收集數據
將其安排在一個對象或數組
產生JSON與JSON.stringify
POST它XMLHttpRequest

你PR可以更好地堅持application/x-www-form-urlencoded數據並在服務器上處理，而不是JSON。您的表單沒有任何可從JSON數據結構中受益的複雜層次結構。

更新在回答這個問題的重大改寫......

你的JS沒有readystatechange處理程序，所以你什麼都不做與響應
你觸發JS點擊提交按鈕時，而不取消默認行爲。只要JS功能完成，瀏覽器就會提交表單（以常規方式）。

來源

2014-03-05 10:33:44 Quentin

請參閱更新 – kstratis

好的，那麼我該如何解決這個問題？ – kstratis

看到這個：http：//darobin.github。io/formic/specs/json/ – OhadR

如何使用HTML表單數據發送一個JSON對象

回答

相關問題