前端监听输入框,在输入值后调用两个ajax请求
时间: 2024-10-09 10:01:37 浏览: 16
在前端,如果你想监听输入框的值并在用户输入完成后调用两个Ajax请求,可以使用JavaScript的事件监听机制,比如`input`事件或者`keyup`事件。这里提供一个简单的示例:
```javascript
// 获取输入框元素
const inputBox = document.getElementById('your-input-box-id');
// 监听输入框的变化
inputBox.addEventListener('input', function(e) {
// 检查输入是否结束
if (e.target.value === '') { // 如果输入为空
// 取消正在进行的Ajax请求,如果有的话
if (xhr && xhr.readyState !== 4) {
xhr.abort();
}
// 调用第一个Ajax请求
const xhr1 = new XMLHttpRequest();
xhr1.open('POST', 'first-api-url', true);
xhr1.onload = function() {
// 处理第一个请求的响应...
};
xhr1.send();
// 同样地,调用第二个Ajax请求
const xhr2 = new XMLHttpRequest();
xhr2.open('POST', 'second-api-url', true);
xhr2.onload = function() {
// 处理第二个请求的响应...
};
xhr2.send();
} else {
// 输入非空时,停止触发额外的Ajax请求
return;
}
});
```
这段代码首先获取了输入框元素,然后添加了一个`input`事件监听器。当用户在输入框中输入完毕停止键入时,它会检查输入是否为空。如果输入为空,则取消之前的请求(如果存在),然后分别发起两个新的Ajax请求。
请注意替换`your-input-box-id`为你的输入框的实际ID,以及`first-api-url`和`second-api-url`为你要发送请求的实际URL。
阅读全文