如何发送一个JSON对象使用HTML格式的数据
所以我有这个HTML表单：
<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));
我究竟做错了什么？
以数组的forms获取完整的表单数据，json将其数据化。
var formData = JSON.stringify($("#myForm").serializeArray());
你可以稍后在ajax中使用它。 或者如果你不使用AJAX; 把它放在隐藏的textarea并传递给服务器。 如果这个数据是通过正常forms的数据作为jsonstring传递的，那么你必须使用json_decode来解码它。 然后你会得到一个数组中的所有数据。
$.ajax({ type: "POST", url: "serverUrl", data: formData, success: function(){}, dataType: "json", contentType : "application/json" });
HTML无法从表单数据生成JSON。
如果你真的想从客户端处理它，那么你将不得不诉诸使用JavaScript来：
- 通过DOM从表单收集数据
- 把它组织在一个对象或数组中
- 用JSON.stringify生成JSON
- 用XMLHttpRequest发布
你可能会更好的坚持application/x-www-form-urlencoded数据并在服务器上处理，而不是JSON。 您的表单没有任何可以从JSON数据结构中受益的复杂层次结构。
更新以回应重大的问题重写…
- 你的JS没有
readystatechange处理器，所以你对响应什么都不做 - 当点击提交button而不取消默认行为时触发JS。 一旦JS函数完成，浏览器将会以正常的方式提交表单。
