如何使用 html 表单数据发送 JSON object
[英]How to send a JSON object using html form data
问题描述
所以我有这个 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 object 发送到我的服务器的最简单方法是什么？
更新：我已经做到了这一点，但它似乎不起作用：
<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));
我究竟做错了什么？
9 个解决方案
解决方案1
167 已采纳 2014-03-05 10:35:07
以数组形式获取完整的表单数据并将其 json 字符串化。
var formData = JSON.stringify($("#myForm").serializeArray());
您可以稍后在 ajax 中使用它。 或者，如果您不使用 ajax； 把它放在隐藏的文本区域并传递给服务器。 如果此数据通过普通表单数据作为 json 字符串传递，那么您必须对其进行解码。 然后，您将获取数组中的所有数据。
$.ajax({
type: "POST",
url: "serverUrl",
data: formData,
success: function(){},
dataType: "json",
contentType : "application/json"
});
解决方案2
65 2014-03-05 10:33:44
HTML 无法从表单数据生成 JSON。
如果您真的想从客户端处理它，那么您将不得不使用 JavaScript 来：
- 通过 DOM 从表单中收集数据
- 将其组织在一个对象或数组中
- 使用JSON.stringify生成 JSON
- 使用XMLHttpRequest 发布它
您最好坚持使用application/x-www-form-urlencoded数据并在服务器上而不是 JSON 上处理它。 您的表单没有任何可以从 JSON 数据结构中受益的复杂层次结构。
更新以响应对问题的重大改写……
- 您的 JS 没有
readystatechange处理程序，因此您对响应什么也不做 - 单击提交按钮时触发 JS 而不取消默认行为。 JS功能完成后，浏览器会立即提交表单（以常规方式）。
解决方案3
6 2020-08-04 21:15:00
您可以尝试以下方法：
<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>
解决方案4
5 2020-03-03 02: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"
}
}
解决方案5
4 2019-04-05 02:57:42
您的代码很好但从未执行过，提交按钮的原因 [type="submit"] 只需将其替换为type=button
<input value="Submit" type="button" onclick="submitform()">
在你的脚本里面； 没有声明形式。
let form = document.forms[0];
xhr.open(form.method, form.action, true);
解决方案6
3 2021-09-29 10:15:30
使用 FormData API
- 使用 FormData API
formData= new FormData(form)捕获表单数据 - 使用
JSON.stringify(Object.fromEntries(formData))将其转换为 JSON - 将这个经过标记的 json 作为 ajax 有效负载发送
var form = document.getElementById('myForm');
form.onsubmit = function(event){
var xhr = new XMLHttpRequest();
var formData = new FormData(form);
//open the request
xhr.open('POST','http://localhost:7000/tests/v1.0/form')
xhr.setRequestHeader("Content-Type", "application/json");
//send the form data
xhr.send(JSON.stringify(Object.fromEntries(formData)));
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
form.reset(); //reset form after AJAX success or do something else
}
}
//Fail the onsubmit to avoid page refresh.
return false;
}
摘自我在这里写的一篇文章： https ://metamug.com/article/html5/ajax-form-submit.html
解决方案7
1 2020-12-22 22:27:07
所以我有这个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));
我究竟做错了什么？
解决方案8
0 2020-12-08 16:30:44
微型库字段辅助正是这样做的： collectValues(formElement)将从输入字段返回一个规范化的 json（这也意味着，复选框作为布尔值，选择作为字符串等）。
解决方案9
0 2022-08-30 10:04:03
如果你想在2022年使用纯javascript...
const ajax = async (config) => {
const request = await fetch(config.url, {
method: config.method,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(config.payload)
});
response = await request.json();
console.log('response', response)
return response
}
// usage
response = ajax({
method: 'POST',
url: 'example.com',
payload: {"name": "Stackoverflow"}
})
解决方案10
-2 2020-11-20 00:02:58
我找到了一种仅使用 HTML 表单来传递 JSON 消息的方法。
此示例适用于 GraphQL，但它适用于任何需要 JSON 消息的端点。
GrapqhQL 默认需要一个称为操作的参数，您可以在其中添加 JSON 格式的查询或突变。 在这种特定情况下，我正在调用此查询，该查询请求获取 allUsers 并返回每个用户的 userId。
{
allUsers
{
userId
}
}
我正在使用文本输入来演示如何使用它，但您可以将其更改为隐藏输入以向用户隐藏查询。
<html>
<body>
<form method="post" action="http://localhost:8080/graphql">
<input type="text" name="operations" value="{"query": "{ allUsers { userId } }", "variables": {}}"/>
<input type="submit" />
</form>
</body>
</html>
为了使这种动态化，您需要 JS 在提交表单之前将文本字段的值传输到查询字符串。 无论如何，我发现这种方法非常有趣。 希望能帮助到你。
如何使用同步页面 POST 从 HTML 表单发送复杂的 JSON 对象？
[英]How do I send a complex JSON object from an HTML form using SYNCHRONOUS page POST?
如何使用 javascript（不使用 jquery）将 HTML 表单数据发送到 JSON？
[英]How do I send HTML form data to JSON using javascript (without jquery)?
如何将 HTML 表单数据作为 JSON 发送到端点 http://localhost:8080
[英]How to send HTML form data as JSON to endpoint http://localhost:8080
如何使用JavaScript将HTML表单值发送到JSON字符串中的localstorage
[英]How to send HTML form values to localstorage in JSON string using JavaScript
如何使用 JavaScript 将数据从 HTML 表单发送到 Google 电子表格？
[英]How to send data from HTML form to Google Spreadsheet using JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将 HTML 表单数据作为 JSON 发送到服务器？
如何使用同步页面 POST 从 HTML 表单发送复杂的 JSON 对象？
如何使用 javascript（不使用 jquery）将 HTML 表单数据发送到 JSON？
如何将 HTML 表单数据作为 JSON 发送到端点 http://localhost:8080
如何以 JSON Object 的形式发送表单数据？
如何使用JavaScript将HTML表单值发送到JSON字符串中的localstorage
如何将html表单数据正确编译为JSON对象
如何使用HTML表单将数据发送和存储在XML文件中？
如何使用 JavaScript 将数据从 HTML 表单发送到 Google 电子表格？
如何使用Ajax在jquery中为jtml元素发送数据？
相关标签