在Web开发中，HTML本身不具有发送数据的能力，它主要用于构建网页的结构和内容展示，通常，发送数据的任务由JavaScript配合后端服务器完成，当需要在同一页面上发出两次或多次数据时，我们通常会使用Ajax技术（通过XMLHttpRequest或Fetch API）来异步发送数据，而无需刷新整个页面。
使用XMLHttpRequest发送两次数据
XMLHttpRequest是一个内置于浏览器中的JavaScript对象，可用于与服务器交互并更新部分网页内容，以下是一个示例，展示了如何使用XMLHttpRequest对象发送两次数据：
1、初始化请求
创建一个XMLHttpRequest对象，并为其指定一个函数，该函数将在请求的状态发生变化时被调用。
````javascript
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 处理响应
}
};
```
2、设置请求方法和URL
通过调用open方法，指定请求的类型（GET、POST等）、URL以及是否异步执行。
````javascript
xhr.open('POST', 'https://example.com/api/data', true);
```
3、发送第一次请求
在发送请求之前，可以设置HTTP请求头和请求体，然后调用send方法发送第一次数据。
````javascript
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
var data1 = JSON.stringify({"key": "value1"});
xhr.send(data1);
```
4、接收第一次响应
在onreadystatechange回调中，处理服务器返回的数据。
````javascript
if (this.readyState == 4 && this.status == 200) {
var response1 = JSON.parse(this.responseText);
// 根据响应做进一步处理
}
```
5、发送第二次请求
如果需要发送第二次请求，可以重复步骤2和3，但这次使用不同的数据。
````javascript
xhr.open('POST', 'https://example.com/api/data', true);
var data2 = JSON.stringify({"key": "value2"});
xhr.send(data2);
```
6、接收第二次响应
同样地，在onreadystatechange回调中处理第二次请求的响应数据。
````javascript
if (this.readyState == 4 && this.status == 200) {
var response2 = JSON.parse(this.responseText);
// 根据响应做进一步处理
}
```
使用Fetch API发送两次数据
Fetch API提供了一个更现代、更强大且更易用的接口来替代XMLHttpRequest，以下是使用fetch函数发送两次数据的示例：
1、发送第一次请求
fetch函数接受URL和一个配置对象作为参数，返回一个Promise。
````javascript
fetch('https://example.com/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({"key": "value1"})
})
.then(response => response.json())
.then(data => {
// 处理响应数据
});
```
2、发送第二次请求
同样的方式发送第二次请求，只需更改body中的数据即可。
````javascript
fetch('https://example.com/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({"key": "value2"})
})
.then(response => response.json())
.then(data => {
// 处理响应数据
});
```
相关问题与解答
Q1: 如何确保两次请求按顺序完成？
A1: 由于Ajax请求是异步的，可以使用Promise链或者async/await语法来确保请求按顺序执行，可以将第二个fetch放在第一个fetch的.then()方法中。
Q2: 如果我想在一个表单中提交两次数据，应该如何操作？
A2: 如果需要在表单提交时发送两次数据，可以在表单的submit事件处理函数中阻止默认的表单提交行为，然后使用上述的XMLHttpRequest或Fetch API手动发送数据，也可以通过JavaScript收集表单数据，分两次发送给服务器。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/281014.html
微信扫一扫 