首页以上程序html完整代码

以上程序html完整代码

时间: 2023-07-24 15:05:42 浏览: 45

好的，以下是一个基本的HTML页面代码，包含了一个用于显示查询结果的`<div>`标签和一个使用Fetch API向服务器发送请求的JavaScript代码。请注意，这只是一个示例，你需要根据你的具体需求来修改代码。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>查询结果</title> </head> <body> <h1>查询结果</h1> <div id="result-div"></div> <script> fetch('/query') .then(response => response.json()) .then(data => { const resultDiv = document.querySelector('#result-div'); data.forEach(row => { const newRow = document.createElement('div'); newRow.textContent = row.column_name; resultDiv.appendChild(newRow); }); }) .catch(error => console.error(error)); </script> </body> </html> ``` 在这个示例中，`<div>`标签的ID属性为`result-div`，JavaScript代码使用Fetch API向`/query`路径发送请求，并使用`then`方法处理返回的JSON数据。在处理数据时，我们使用`forEach`方法遍历每一行数据，并创建一个新的`<div>`标签来显示每个行的`column_name`值，然后将该标签添加到`result-div`中。请注意，这个示例仅仅是一个基本的框架，你需要根据你的具体需求来修改代码，例如更改查询语句、更改HTML页面的布局和样式等。