查询图书的前端代码怎么写
时间: 2024-04-30 07:20:00 浏览: 7
查询图书的前端代码需要使用HTML、CSS和JavaScript。
首先,需要在HTML中创建一个表单,表单包括一个输入框和一个提交按钮。输入框用于输入查询关键字,提交按钮用于触发查询操作。
```html
<form>
<input type="text" id="query" placeholder="请输入关键字">
<button type="submit" onclick="search()">查询</button>
</form>
```
然后,在JavaScript中编写查询函数,该函数通过AJAX向后端发送查询请求,并将查询结果显示在页面上。以下是一个简单的查询函数示例:
```javascript
function search() {
var query = document.getElementById("query").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/books?q=" + query);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 将查询结果显示在页面上
// ...
}
};
xhr.send();
}
```
其中,`XMLHttpRequest`是用于向后端发送请求的JavaScript对象。在查询函数中,我们通过`open`方法指定请求的方法和URL,然后通过`onreadystatechange`属性指定响应处理函数。当响应的`readyState`属性变为`4`,即响应完成时,我们可以通过`responseText`属性获取响应结果,并将其解析为JavaScript对象。最后,我们将查询结果显示在页面上即可。
需要注意的是,以上代码仅为示例,具体实现可能会有所不同,例如需要处理错误情况、显示查询状态等。