用nodejs完成需求:模拟接口,前端异步请求接口,检验数据是否可用。get请求和post请求所获取的请求不一样。get请求返回["zs","ls","ww"],post请求返回["张三","李四","王五"]。html页面要求是"<input oninput=""></input><span></span>",防抖异步请求接口数据,span里显示数据是否可用,异步使用axios,其他使用原生js代码完成
时间: 2023-07-02 16:23:24 浏览: 128
html页面模拟测试get/post请求
3星 · 编辑精心推荐
好的,我已经明白您的需求了。
以下是我编写的用 Node.js 模拟接口的代码:
```javascript
const http = require('http');
http.createServer((req, res) => {
if (req.method === 'GET') {
res.writeHead(200, { 'Content-Type': 'application/json' });
res.write(JSON.stringify(['zs', 'ls', 'ww']));
res.end();
} else if (req.method === 'POST') {
res.writeHead(200, { 'Content-Type': 'application/json' });
res.write(JSON.stringify(['张三', '李四', '王五']));
res.end();
}
}).listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});
```
以上代码创建了一个 HTTP 服务器,监听在本地的 3000 端口。当客户端发送 GET 请求时,返回 JSON 格式的 `["zs","ls","ww"]` 数组;当客户端发送 POST 请求时,返回 JSON 格式的 `["张三","李四","王五"]` 数组。
接下来,我将为您提供前端页面的 HTML 和 JavaScript 代码:
```html
<input oninput="debounce(handleInput, 500)" />
<span></span>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const input = document.querySelector('input');
const span = document.querySelector('span');
function handleInput() {
const value = input.value;
if (value === '') {
span.textContent = '';
return;
}
axios.get(`http://localhost:3000?q=${value}`)
.then(response => {
span.textContent = '可用';
})
.catch(error => {
axios.post('http://localhost:3000', {
q: value
})
.then(response => {
span.textContent = '可用';
})
.catch(error => {
span.textContent = '不可用';
});
});
}
function debounce(fn, delay) {
let timer;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(context, args);
}, delay);
};
}
</script>
```
以上代码中,我们首先获取了 HTML 页面中的 `input` 和 `span` 元素,然后定义了 `handleInput` 函数。该函数会在用户输入时被触发,并使用防抖函数 `debounce` 控制异步请求的频率。
在 `handleInput` 函数中,我们首先获取了用户输入的值 `value`,并判断其是否为空。如果为空,则清空 `span` 中的内容,并直接返回。
否则,我们使用 axios 发送 GET 请求,请求的 URL 中包含了用户输入的值 `value`。如果请求成功,则将 `span` 中的内容设置为“可用”。
如果 GET 请求失败,则说明该值不存在,我们使用 axios 发送 POST 请求,请求的 body 中包含了用户输入的值 `value`。如果 POST 请求成功,则将 `span` 中的内容设置为“可用”。
如果 POST 请求失败,则说明该值已经被占用,我们将 `span` 中的内容设置为“不可用”。
最后,我们使用了防抖函数 `debounce` 包装了 `handleInput` 函数,并将其作为 `input` 元素的 `oninput` 事件处理函数。这样,当用户输入时,就会触发 `debounce(handleInput, 500)` 函数,从而控制异步请求的频率。
阅读全文