JavaScript 序列化表单

  2. 贴士文章
  3. JavaScript 贴士
  4. JavaScript 序列化表单
Mehvish Ashiq 2023年1月30日 2022年5月10日
JavaScript JavaScript Serialize Form
  1. 使用 JSON.stringify() 方法序列化 JavaScript 对象
  2. 在 JavaScript 中使用 FormData() 序列化表单
  3. 在 JavaScript 中使用 XMLSerializer() 序列化表单
  4. 在 JavaScript 中使用 jQuery 序列化表单
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(/&quot;/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() 方法查找&quote; （这些在双引号编码时可见，你可以在控制台上打印 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 序列化表单 - xmlserializer

在 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
Author: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook