如何使用 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));

我做错了什么？

619740 次浏览
小开

HTML 没有提供从表单数据生成 JSON 的方法。

如果你真的想从客户端处理它，那么你就必须使用 JavaScript 来:

  1. 通过 DOM 从表单中收集数据
  2. 把它组织成一个物体或数组
  3. 用 JSON.stringify生成 JSON
  4. 用 XMLHttpRequest发布

您最好坚持使用 application/x-www-form-urlencoded数据，并在服务器上处理它，而不是使用 JSON。您的表单没有任何可以从 JSON 数据结构中受益的复杂层次结构。

更新对重写问题的回应..。

  • 您的 JS 没有 readystatechange处理程序，因此不需要对响应进行任何操作
  • 单击提交按钮时触发 JS，而不取消默认行为。一旦 JS 功能完成，浏览器将(以常规方式)提交表单。
小开
最佳答案

以数组的形式获取完整的表单数据，然后 json 对其进行字符串化。

var formData = JSON.stringify($("#myForm").serializeArray());

你可以稍后在 ajax 中使用它。或者如果不使用 ajax，则将其放在隐藏的文本区域中并传递给服务器。如果这个数据通过普通表单数据作为 json 字符串传递，那么您必须对它进行解码。然后您将获得一个数组中的所有数据。

$.ajax({
type: "POST",
url: "serverUrl",
data: formData,
success: function(){},
dataType: "json",
contentType : "application/json"
});
小开

你的代码很好，但从来没有执行过，原因是提交按钮[ type = “ mit”] 只需将其替换为 < strong > type = Button

<input value="Submit" type="button" onclick="submitform()">

在你的剧本里; 没有声明表格 。

let form = document.forms[0];
xhr.open(form.method, form.action, true);
小开

我迟到了，但我要说的是，对于那些需要一个对象，只使用 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"
}
}
小开

你可以试试这样:

<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>
小开

我找到了一种仅使用 HTML 表单传递 JSON 消息的方法。

这个示例适用于 GraphQL，但是它将适用于任何期待 JSON 消息的端点。

缺省情况下，GrapqhQL 需要一个名为 operation 的参数，您可以在其中以 JSON 格式添加查询或变异。在这个特定的例子中，我调用了这个查询，它请求获取 allUsers 并返回每个用户的 userId。

{
allUsers
{
userId
}
}

我正在使用一个文本输入来演示如何使用它，但是您可以将其更改为一个隐藏的输入，以便对用户隐藏查询。

<html>
<body>
<form method="post" action="http://localhost:8080/graphql">
<input type="text" name="operations" value="{&quot;query&quot;: &quot;{ allUsers { userId } }&quot;, "variables":  {}}"/>
<input type="submit" />
</form>
</body>
</html>

为了实现这种动态性，在提交表单之前，需要 JS 将文本字段的值传输到查询字符串。不管怎样，我发现这个方法很有趣。希望能有帮助。

小开

微库 外勤助理正是这样做的: collectValues(formElement)将从输入字段返回一个 正常化了 json (也就是说，复选框为布尔值，选择为字符串，等等)。

小开

使用 FormData API

  1. 使用 FormDataAPI formData= new FormData(form)捕获表单数据
  2. 使用 JSON.stringify(Object.fromEntries(formData))将其转换为 JSON
  3. 把这个 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

小开

如果你想在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"}
})

提交答案