js实现serialize
JavaScript 实现 serialize 功能
在 JavaScript 中，serialize 通常指将表单数据或对象序列化为 URL 编码的字符串（如 key1=value1&key2=value2），常用于 AJAX 请求或表单提交。以下是几种实现方式：
表单序列化
将表单元素的值序列化为 URL 编码字符串：
function serializeForm(formElement) {
const formData = new FormData(formElement);
return new URLSearchParams(formData).toString();
}
// 使用示例
const form = document.querySelector('form');
const serializedData = serializeForm(form);
console.log(serializedData); // 输出如 "name=John&age=30"对象序列化
将普通对象序列化为 URL 编码字符串：
function serializeObject(obj) {
const params = new URLSearchParams();
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
params.append(key, obj[key]);
}
}
return params.toString();
}
// 使用示例
const data = { name: 'Alice', age: 25 };
console.log(serializeObject(data)); // 输出 "name=Alice&age=25"嵌套对象序列化
处理嵌套对象或数组（需递归或自定义逻辑）：
function serializeNestedObject(obj, prefix = '') {
const pairs = [];
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
const fullKey = prefix ? `${prefix}[${key}]` : key;
if (typeof obj[key] === 'object' && obj[key] !== null) {
pairs.push(serializeNestedObject(obj[key], fullKey));
} else {
pairs.push(`${encodeURIComponent(fullKey)}=${encodeURIComponent(obj[key])}`);
}
}
}
return pairs.join('&');
}
// 使用示例
const nestedData = { user: { name: 'Bob', hobbies: ['coding', 'music'] } };
console.log(serializeNestedObject(nestedData)); // 输出 "user[name]=Bob&user[hobbies][0]=coding&user[hobbies][1]=music"注意事项
- 编码处理：
encodeURIComponent确保特殊字符（如&,=）被正确转义。 - 兼容性：
FormData和URLSearchParams是现代 API，旧浏览器需 polyfill。 - 文件上传：若表单包含文件输入，
FormData可直接用于multipart/form-data请求。
根据需求选择合适的方法，表单序列化推荐使用原生 FormData，对象序列化可手动实现或依赖库（如 jQuery 的 $.param）。
