JavaScript 序列化表单
想知道一个解决方案，让你可以在使用和不使用 jQuery 的情况下在 JavaScript 中序列化表单？本教程将指导你使用/不使用 jQuery 的 JavaScript 序列化表单。
但在此之前，了解 JavaScript Serialize 是很好的。序列化是将数据结构或对象转换为合适的格式以通过网络传输的过程。
我们可以通过调用方法 JSON.stringify() 将对象序列化为 JSON 字符串，同时调用 CSSStyleDeclaration.getPropertyValue() 方法来序列化我们的 CSS 值。
在本教程中，我们将序列化表单和对象。我们将使用 JSON.stringify()、XMLSerializer() 和 FormData 接口在 JavaScript 中进行序列化。
JSON.stringify() 将 JavaScript 值或对象转换为 JSON 字符串。它可以有至少一个，最多三个参数。
这里，value 参数是必需的，而 replacer 和 space 是可选的。你可以在此处找到有关这些参数的更多信息。
我们将使用 XMLSerializer() 的 serializeToString() 方法将我们的文档对象模型 (DOM) 树转换为 XML 字符串。FormData 接口有助于创建键值对的集合，该集合描述了具有相应值的表单字段。
然后，这些很容易使用 XMLHttpRequest.send() 方法发送。
让我们从使用 JSON.stringify() 方法序列化对象开始，因为我们将在序列化表单时连接到这个概念。
使用 JSON.stringify() 方法序列化 JavaScript 对象
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title> Serialize Object using JSON</title>
</head>
<body>
Type of Resulting String: <span id="resultType"></span><br />
JSON String: <span id="serialized"></span><br >
From JSON to JS Object: <span id="object"></span>
</body>
</html>
JavaScript 代码：
let student = {
firstname: 'John',
lastname: 'Christopher',
semester: 4,
courses: ['Python', 'JavaScript', 'Java']
};
let jsonString = JSON.stringify(student);
resultType.innerHTML = typeof jsonString;
serialized.innerHTML = jsonString;
let jsonToObject = JSON.parse(jsonString.replace(/"/g, ' '));
object.innerHTML = '{firstname:' + jsonToObject.firstname + ',' +
'lastname:' + jsonToObject.lastname + ',' +
'semester: ' + jsonToObject.semester + ',' +
'courses: [' + jsonToObject.courses + ']}';
输出：
Type of Resulting String:
string
JSON String:
{"firstname":"John","lastname":"Christopher","semester":4,"courses":["Python","JavaScript","Java"]}
From JSON to JS Object:
{firstname:John,lastname:Christopher,semester: 4,courses: [Python,JavaScript,Java]}
在上面的代码中，JSON.stringify() 采用名为 student 的对象并将其转换为序列化或字符串化字符串。
我们可以使用 typeof 检查结果字符串的数据类型。
replace() 方法查找"e; （这些在双引号编码时可见，你可以在控制台上打印 jsonString 时看到）在一个字符串中（这里的字符串是 jsonString）并用空格替换它。
JSON.parse() 方法将字符串转换回对象。
此外，JSON.stringify() 也与原语一起使用。请参阅以下代码。
alert(JSON.stringify(3)) // Output: 3
// a string in JSON is still a string, but double-quoted
alert(JSON.stringify('Mehvish')) // Output: "Mehvish"
alert(JSON.stringify(false)); // Output: false
alert(JSON.stringify([5, 3, 6, 4])); // Output: [5,3,6,4]
在 JavaScript 中使用 FormData() 序列化表单
让我们从使用 FormData() 和 XMLHttpRequest.send() 方法序列化数据的最简单方法开始。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Serialize Form</title>
</head>
<body>
<form id="form">
<label for="firstname">FirstName:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">LastName:</label>
<input type="text" name="lastname" id="lastname">
<label for="age">Age:</label>
<input type="text" name="age" id="age">
<button>Submit</button>
</form>
</body>
</html>
JavaScript 代码：
var form = document.querySelector('form');
var data = new FormData(form);
document.addEventListener('submit', function(event) {
event.preventDefault();
let url = 'https://jsonplaceholder.typicode.com/posts';
var xmlhr = new XMLHttpRequest();
xmlhr.open('POST', url);
xmlhr.send(data);
xmlhr.onreadystatechange = function() {
if (xmlhr.readyState === 4) {
var response = JSON.parse(xmlhr.responseText);
if (xmlhr.status === 201) {
console.log('successful');
} else {
console.log('failed');
}
}
}
});
输出：
successful
如果数据通过网络成功发送，上面的示例显示 successful；否则 failed。event.preventDefault() 阻止表单提交到服务器。
XMLHttpRequest() 用于与网络服务器交换数据。open() 方法指定请求，而 send() 将 POST 请求发送到服务器。
onreadystatechange 用于定义 readyState（保持 XMLHttpRequest 状态）属性何时更改。
我们有 HTML 表单，并且希望在每次提交表单时获取值。在下面的示例中，我们使用 JSONPlaceholder API 的 fetch() 方法查看名为 FormData() 的本机方法。
HTML 代码：（对于下面给出的所有示例，此 HTML 代码保持不变）
<!DOCTYPE html>
<html>
<head>
<title>Serialize Form</title>
</head>
<body>
<form id="form">
<label for="firstname">FirstName:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">LastName:</label>
<input type="text" name="lastname" id="lastname">
<label for="age">Age:</label>
<input type="text" name="age" id="age">
<button>Submit</button>
</form>
</body>
</html>
JavaScript 代码：
var form = document.querySelector('form');
var formData = new FormData(form);
document.addEventListener('submit', function(event) {
event.preventDefault();
let url = 'https://jsonplaceholder.typicode.com/posts';
fetch(url, {
method: 'POST',
body: new FormData(event.target),
})
.then(function(response) {
if (response.ok) {
return response.json();
}
return Promise.reject(response);
})
.then(function(formData) {
console.log(formData);
})
.catch(function(error) {
console.warn(error);
});
});
输出：
//you get the following Output each time you submit the form
{
id: 101
}
在上面的示例中，我们使用 fetch() 方法将数据发送到 JSONPlaceholder API。
为此，我们将 event.target（提交的表单）传递给 FormData() 构造函数并将其用作 body 属性。
fetch() 方法从网络中获取资源并返回一个 promise，一旦响应准备好/可用，该承诺就会得到满足。你可以在此处找到有关此方法的更多信息。
你可能已经在上面的输出中注意到，我们获取的不是实际数据而是数字。JSONPlaceholder 接受 JSON 对象，但不接受 FormData。
我们需要使用 for 循环将其转换为对象。因此，新的 JavaScript 代码如下所示。
var form = document.querySelector('form');
var data = new FormData(form);
// convert FormData to Object
var serializeFormToObject = function(form) {
var objForm = {};
var formData = new FormData(form);
for (var key of formData.keys()) {
objForm[key] = formData.get(key);
}
return objForm;
};
document.addEventListener('submit', function(event) {
event.preventDefault();
let url = 'https://jsonplaceholder.typicode.com/posts';
fetch(url, {
method: 'POST',
body: JSON.stringify(serializeFormToObject(event.target)),
headers: {'Content-type': 'application/json; charset=UTF-8'}
})
.then(function(response) {
if (response.ok) {
return response.json();
}
return Promise.reject(response);
})
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.warn(error);
});
});
输出：
{
age: "30",
firstname: "mehvish",
id: 101,
lastname: "ashiq"
}
我们还可以使用 formEntries() 将 FormData 转换为 Object 而无需任何循环。
请参阅以下 JavaScript 代码块。
var form = document.querySelector('form');
var formData = new FormData(form);
document.addEventListener('submit', function(event) {
event.preventDefault();
let url = 'https://jsonplaceholder.typicode.com/posts';
fetch(url, {
method: 'POST',
body: JSON.stringify(Object.fromEntries(new FormData(event.target))),
headers: {'Content-type': 'application/json; charset=UTF-8'}
})
.then(function(response) {
if (response.ok) {
return response.json();
}
return Promise.reject(response);
})
.then(function(formData) {
console.log(formData);
})
.catch(function(error) {
console.warn(error);
});
});
输出：
{
age: "30",
firstname: "mehvish",
id: 101,
lastname: "ashiq"
}
FormData 构造函数在所有现代浏览器中都能完美运行，包括 IE 10 或更高版本。但是，Object.formEntries() 在 IE 中不起作用。
现在让我们在下面给出的示例中使用 FormData() 练习 URLSearchParams。URLSearchParams 用于定义处理 URL 查询字符串的实用函数。
Array.from() 是用于从可迭代对象创建新实例的静态方法。
JavaScript 代码：
var form = document.querySelector('form');
document.addEventListener('submit', function(event) {
event.preventDefault();
let url = 'https://jsonplaceholder.typicode.com/posts';
fetch(url, {
method: 'POST',
body: new URLSearchParams(Array.from(new FormData(form))),
})
.then(function(response) {
if (response.ok) {
return response.json();
}
return Promise.reject(response);
})
.then(function(formData) {
console.log(formData);
})
.catch(function(error) {
console.warn(error);
});
});
输出：
{
age: "30",
firstname: "mehvish",
id: 101,
lastname: "ashiq"
}
在 JavaScript 中使用 XMLSerializer() 序列化表单
我们已经学习了如何使用对象序列化表单。但是，如果我们想将表单序列化为树数据结构怎么办。
为此，我们可以使用 XMLSerializer() 的 serializeToString() 方法。
JavaScript 代码：
var form = document.querySelector('form');
document.addEventListener('submit', function() {
if (window.XMLSerializer) {
var serializer = new XMLSerializer();
var str = serializer.serializeToString(form);
alert(str);
} else {
alert(document.body.outerHTML);
}
});
输出：
在 JavaScript 中使用 jQuery 序列化表单
如果你对使用 jQuery 没问题，下面的代码很好。但是不要忘记在你的 <head> 标签中包含 jQuery。
JavaScript 代码：
var form = document.querySelector('form');
document.addEventListener('submit', function() {
event.preventDefault();
let url = 'https://jsonplaceholder.typicode.com/posts';
fetch(url, {
method: 'POST',
body: $('form').text($('#form').serialize()),
})
.then(function(response) {
if (response.ok) {
return response.json();
}
return Promise.reject(response);
})
.then(function(formData) {
console.log(formData);
})
.catch(function(error) {
console.warn(error);
});
});
输出：
firstname=mehvish&lastname=ashiq&age=30
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
