如何使用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对象

回答

相关问题