如何使用html表单数据发送JSON对象
如何使用html表单数据发送JSON对象
提问于 2014-03-05 18:29:20
所以我得到了这个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>当用户单击submit时，将表单数据作为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));我做错了什么？
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-03-05 18:35:07
获取完整的表单数据作为数组，并使用json对其进行字符串化。
var formData = JSON.stringify($("#myForm").serializeArray());您可以稍后在ajax中使用它。或者，如果你没有使用ajax，把它放在隐藏的文本区并传递给服务器。如果这些数据是作为json字符串通过标准格式数据传递的，那么您必须使用json_decode对其进行解码。然后，您将获得一个数组中的所有数据。
$.ajax({
type: "POST",
url: "serverUrl",
data: formData,
success: function(){},
dataType: "json",
contentType : "application/json"
});Stack Overflow用户
发布于 2020-03-03 10:31:16
我来晚了，但我要说的是，对于那些需要对象的人来说，只使用html是有办法的。在一些服务器端框架中，如PHP，您可以编写以下代码：
<form action="myurl" method="POST" name="myForm">
<p><label for="first_name">First Name:</label>
<input type="text" name="name[first]" id="fname"></p>
<p><label for="last_name">Last Name:</label>
<input type="text" name="name[last]" id="lname"></p>
<input value="Submit" type="submit">
</form>因此，我们需要将输入的名称设置为object[property]以获取一个对象。在上面的示例中，我们获得了一个包含以下JSON的数据：
{
"name": {
"first": "some data",
"last": "some data"
}
}Stack Overflow用户
发布于 2020-08-05 05:15:01
您可以尝试执行以下操作：
<html>
<head>
<title>test</title>
</head>
<body>
<form id="formElem">
<input type="text" name="firstname" value="Karam">
<input type="text" name="lastname" value="Yousef">
<input type="submit">
</form>
<div id="decoded"></div>
<button id="encode">Encode</button>
<div id="encoded"></div>
</body>
<script>
encode.onclick = async (e) => {
let response = await fetch('http://localhost:8482/encode', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
let text = await response.text(); // read response body as text
data = JSON.parse(text);
document.querySelector("#encoded").innerHTML = text;
// document.querySelector("#encoded").innerHTML = `First name = ${data.firstname} <br/>
// Last name = ${data.lastname} <br/>
// Age = ${data.age}`
};
formElem.onsubmit = async (e) => {
e.preventDefault();
var form = document.querySelector("#formElem");
// var form = document.forms[0];
data = {
firstname : form.querySelector('input[name="firstname"]').value,
lastname : form.querySelector('input[name="lastname"]').value,
age : 5
}
let response = await fetch('http://localhost:8482/decode', {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
let text = await response.text(); // read response body as text
document.querySelector("#decoded").innerHTML = text;
};
</script>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22195065
复制相关文章
相似问题