用js写一个前端接后端的搜索功能
时间: 2023-12-10 15:05:22 浏览: 40
当然可以!下面是一个使用原生JavaScript编写的简单搜索功能示例。
假设我们有一个搜索输入框和一个搜索按钮,当用户点击搜索按钮时,我们将搜索输入框中的值发送到后端API,并将响应数据显示在页面上。
HTML代码:
```html
<input type="text" id="search-input">
<button id="search-button">搜索</button>
<ul id="search-results"></ul>
```
JavaScript代码:
```js
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const searchResults = document.getElementById('search-results');
searchButton.addEventListener('click', () => {
const query = searchInput.value;
fetch(`/api/search?q=${query}`)
.then(response => response.json())
.then(data => {
searchResults.innerHTML = ''; // 清空之前的搜索结果
data.forEach(result => {
const li = document.createElement('li');
li.textContent = result;
searchResults.appendChild(li);
});
})
.catch(error => {
console.log(error);
});
});
```
在上面的代码中,我们使用了fetch函数来发送GET请求。在搜索按钮被点击时,我们获取输入框中的值,将其作为查询参数发送到后端API,然后将响应数据转换为JSON格式并在页面上显示出来。
请注意,这只是一个简单的示例,您需要根据您的后端API来修改URL和请求参数。另外,您可以使用样式来美化搜索组件以使其更加美观。