前端实现通过给后端传3个参数,id,开始时间,结束时间实现搜索功能
时间: 2024-05-01 17:17:07 浏览: 18
前端可以通过以下方式实现搜索功能:
1. 创建一个表单,包含3个输入框:id、开始时间和结束时间,以及一个搜索按钮。
2. 在搜索按钮的点击事件中,获取表单中的3个参数值。
3. 使用Ajax向后端发送请求,并传递3个参数值。
4. 后端接收到请求后,根据传递的参数进行搜索,并返回搜索结果。
5. 前端接收到后端返回的搜索结果,将结果展示在页面上。
以下是一个简单的示例代码:
HTML代码:
```
<form>
<label>id:</label>
<input type="text" name="id" id="id">
<label>开始时间:</label>
<input type="text" name="start" id="start">
<label>结束时间:</label>
<input type="text" name="end" id="end">
<button type="button" onclick="search()">搜索</button>
</form>
<div id="result"></div>
```
JavaScript代码:
```
function search() {
var id = document.getElementById('id').value;
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
// 发送Ajax请求
var xhr = new XMLHttpRequest();
xhr.open('GET', '/search?id=' + id + '&start=' + start + '&end=' + end);
xhr.onload = function() {
if (xhr.status === 200) {
var result = JSON.parse(xhr.responseText);
// 展示搜索结果
var resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
for (var i = 0; i < result.length; i++) {
var item = result[i];
var itemDiv = document.createElement('div');
itemDiv.innerHTML = 'id: ' + item.id + ', 时间: ' + item.time;
resultDiv.appendChild(itemDiv);
}
} else {
console.log('请求失败');
}
};
xhr.send();
}
```
后端代码(使用Node.js和Express框架):
```
app.get('/search', function(req, res) {
var id = req.query.id;
var start = req.query.start;
var end = req.query.end;
// 根据id、开始时间和结束时间进行搜索
var result = search(id, start, end);
// 返回搜索结果
res.json(result);
});
```