在前端开发中，我们常常需要向服务器提交数据。其中最常用的方式就是使用HTTP协议的POST方法。本文将介绍如何使用Javascript来发送POST请求并提交数据。
为什么使用POST方法
HTTP协议定义了多种请求方法，包括GET、POST、PUT、DELETE等。这些方法的作用不同，而在前端开发中，最常用的就是GET和POST方法。GET方法用于获取服务器上的资源，比如网页或图片等；POST方法则用于向服务器提交数据。相对于GET方法，POST方法具有以下优点：
- 安全性更高。POST方法将数据放在请求体中，而不是URL中，因此不容易被第三方窃取。
- 传输数据量更大。GET方法有长度限制，POST方法则没有这个限制。
- 可以上传文件。GET方法无法上传文件，而POST方法可以。
因此，在需要向服务器提交数据时，我们通常会选择使用POST方法。
发送POST请求
要向服务器发送POST请求，可以使用XMLHttpRequest对象。XMLHttpRequest是Javascript中的一个内置对象，它可以用于与服务器进行HTTP通信。以下是使用XMLHttpRequest对象发送POST请求的基本步骤：
- 创建XMLHttpRequest对象。
var xhr = new XMLHttpRequest();
- 设置请求方法和URL。
xhr.open('POST', '/submit');- 设置请求头。
xhr.setRequestHeader('Content-Type', 'application/json');- 设置回调函数。
-- -------------------- ---- -------
---------------------- - ---------- -
-- --------------- --- -------------------- -
-- ----------- --- ---- -
------------------------------
- ---- -
----------------------
-
-
--这里的回调函数会在服务器响应后被调用。我们可以在这个函数中进行一些操作，比如解析服务器返回的数据。
- 发送请求。
xhr.send(JSON.stringify({name: 'John', age: 18}));这里使用了JSON.stringify方法将要提交的数据转换为JSON字符串，并通过send方法发送给服务器。
提交数据
在POST请求中，我们需要向服务器提交数据。有两种常见的方式可以提交数据：表单和JSON。
表单提交
表单是HTML中常见的元素之一，它可以用于收集用户输入的数据并提交到服务器。要使用表单提交数据，可以将表单中的数据序列化为字符串，并将其放在请求体中。以下是一个提交注册信息的例子：
-- -------------------- ---- ------- ----- ------------------ ------------------ -------------- ------ -------------------------- ------ ----------- ------------- --------------- --------- ------ ------------------------- ------ --------------- ------------- --------------- --------- ------- ------------------------- -------
在上面的代码中，我们创建了一个包含用户名和密码的表单，并设置了它的action属性为/register，method属性为post。当用户点击提交按钮时，浏览器会将表单中的数据序列化为字符串，并通过POST请求发送给服务器。
JSON提交
除了使用表单提交数据外，我们还可以使用JSON来提交数据。JSON是一种轻量级的数据交换格式，它比XML更加简洁，易于阅读和编写。要使用JSON提交数据，需要将数据转换为JSON字符串，并将其放在请求体中。以下是一个提交JSON数据的例子：
-- -------------------- ---- -------
--- --- - --- -----------------
---------------- -----------
------------------------------------ --------------------
---------------------- - ---------- -
-- --------------- --- -------------------- -
-- ----------- --- ---- -
------------------------------
- ---- -
----------------------
-
-
--
------------------------------ ------- ---- ------在上面的代码中，我们创建了一个包含姓名和年龄
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3982