如何使用html表单数据发送JSON对象所以我有这个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));我究竟做错了什么？
3 回答
holdtom
TA贡献1805条经验 获得超10个赞
获取完整的表单数据作为数组和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"});
墨色风雨
TA贡献1853条经验 获得超6个赞
HTML无法从表单数据生成JSON。
如果你真的想从客户端处理它，那么你将不得不求助于使用JavaScript：
通过DOM从表单中收集数据
将它组织在一个对象或数组中
使用JSON.stringify生成JSON
你可能最好不要坚持application/x-www-form-urlencoded使用服务器而不是JSON处理数据和处理数据。您的表单没有任何可以从JSON数据结构中受益的复杂层次结构。
更新以回应重大改写的问题......
你的JS没有
readystatechange处理程序，因此你对响应没有任何作用单击提交按钮时触发JS而不取消默认行为。一旦JS功能完成，浏览器将以常规方式提交表单。
繁花如伊
TA贡献2012条经验 获得超12个赞
您的代码很好但从未执行过，提交按钮的原因[type =“submit”]只需用type = button替换它
<input value="Submit" type="button" onclick="submitform()">
在你的脚本里面; 表单未声明。
let form = document.forms[0];xhr.open(form.method, form.action, true);
添加回答
举报
0/150
提交
取消