在html页面查询时接收返回的数据
时间: 2023-09-03 22:16:58 浏览: 62
要在 HTML 页面中接收返回的数据,你可以使用 JavaScript 来处理 AJAX 请求的响应。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>查询数据示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="search-input">
<button onclick="search()">查询</button>
<div id="search-result"></div>
<script>
function search() {
var searchTerm = document.getElementById('search-input').value;
$.ajax({
url: 'http://api.example.com/search', // 替换为你的接口地址
method: 'GET',
data: { query: searchTerm },
success: function(response) {
// 请求成功时的回调函数
// 在这里处理接口返回的数据
displayResult(response);
},
error: function() {
// 请求失败时的回调函数
// 在这里处理错误情况
displayResult('查询失败');
}
});
}
function displayResult(result) {
var resultContainer = document.getElementById('search-result');
resultContainer.innerHTML = result;
}
</script>
</body>
</html>
```
在上面的示例中,我们添加了一个查询输入框和一个按钮。当用户点击按钮时,会触发 `search()` 函数。该函数获取查询词,然后使用 AJAX 发送 GET 请求到指定的接口地址,并将查询词作为参数传递给接口。请求成功后,我们调用 `displayResult()` 函数来显示返回的结果,如果请求失败,则显示错误信息。
在 `displayResult()` 函数中,我们通过修改 `search-result` 元素的 `innerHTML` 属性来将结果显示在页面上。
请注意,这只是一个基本的示例,实际情况下你可能需要根据接口返回的数据结构进行进一步的处理和展示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)