如何将JavaScript对象与html表单一起发送

Question

我有一个HTML表单，它有很多输入字段。当用户键入其中一个时，JavaScript会生成一些对象，其中包含我需要到达服务器的数据。我知道我可以用AJAX发送这些对象，但一旦它们到达服务器端，我需要它们与表单中的正常数据以相同的功能结束(我使用flask作为后端(。有没有什么方法可以把对象和表单一起发送，这样它们就可以在同一个地方结束了？

这是表格的开头：

<form action="/org/new-task" method="post">
<div class="mb-3">
<select name="rep-type" class="form-select">
<option selected disabled>Type of task</option>
<option value="0">Ongoing/repeating</option>
<option value="1">One-off</option>
</select>
</div>
...

这里是当我console.log()其中一个对象时的输出(有多个，但它们非常相似(：

(2) ["painting", "cleaning"]

Answer 1

用一个"正常的"；表单提交。。。您可以将它们作为字符串存储在一些隐藏的输入元素中。

您必须在python端解析该字符串。在这里查看

let some_object = {
name: "John",
last: "Doh"
}
// Stringify the object and store it in the hidden input
let hidden_input = document.querySelector("[name='js_object']")
hidden_input.value = JSON.stringify(some_object)
// Just for this demo... to console log something.
document.querySelector("form").addEventListener("submit", function(e){
e.preventDefault()
console.log(hidden_input.value)
console.log(typeof(hidden_input.value))
})

<form>
<input type="hidden" name="js_object">
<button type="submit">Submit</button>
</form>

Answer 2

您有一个隐藏的输入，或者可以在提交时序列化表单并使用JavaScript提交。不过，避免DOM更新并只使用JS:可能更简单

来自MDN:

使用绑定到表单元素的FormData还可以将FormData对象绑定到元素。这将创建一个FormData对象，表示表单中包含的数据。

HTML是典型的：

<form id="myForm">
<label for="myName">Send me your name:</label>
<input id="myName" name="name" value="John">
<input type="submit" value="Send Me!">
</form>

但JavaScript取代了形式：

window.addEventListener( "load", function () {
function sendData() {
const XHR = new XMLHttpRequest();
// Bind the FormData object and the form element
const FD = new FormData( form );
// Define what happens on successful data submission
XHR.addEventListener( "load", function(event) {
alert( event.target.responseText );
} );
// Define what happens in case of error
XHR.addEventListener( "error", function( event ) {
alert( 'Oops! Something went wrong.' );
} );
// Set up our request
XHR.open( "POST", "https://example.com/cors.php" );
// The data sent is what the user provided in the form
XHR.send( FD );
}
// Access the form element...
const form = document.getElementById( "myForm" );
// ...and take over its submit event.
form.addEventListener( "submit", function ( event ) {
event.preventDefault();
sendData();
} );
} );

不过，我建议将XHR替换为fetch请求，或者使用您正在使用的任何库来代替它。这是最灵活的，因为您现在可以处理如何发送FormData。您可以将其更改为JSON，并使您在服务器上的处理更加容易。