新开传奇私服

传奇私服发布网

当前位置:首页 > 互联网 IT业界 > html如何刷新表格

html如何刷新表格

admin 互联网 IT业界 49热度

刷新HTML表格,可以使用JavaScript和AJAX技术,以下是一个简单的示例:

(图片来源网络,侵删)

1、创建一个HTML文件,包含一个表格和一个按钮,点击按钮时,将触发JavaScript函数以刷新表格数据。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>刷新表格示例</title> </head> <body> <h1>刷新表格示例</h1> <table id="myTable" border="1"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </table> <button onclick="refreshTable()">刷新表格</button> <script src="script.js"></script> </body> </html>

2、接下来,创建一个名为script.js的JavaScript文件,编写一个名为refreshTable的函数,这个函数将使用AJAX从服务器获取新数据,并更新表格内容。

function refreshTable() { // 创建一个新的XMLHttpRequest对象 var xhttp = new XMLHttpRequest(); // 设置请求方法和URL xhttp.open("GET", "get_data.php", true); // 设置响应类型为JSON xhttp.responseType = "json"; // 当请求完成时执行的函数 xhttp.onload = function() { if (this.status == 200) { // 获取表格元素 var table = document.getElementById("myTable"); // 清空表格内容 table.innerHTML = ""; // 添加表头 table.innerHTML += "<tr><th>姓名</th><th>年龄</th></tr>"; // 遍历返回的数据,添加新的行 for (var i = 0; i < this.response.length; i++) { table.innerHTML += "<tr><td>" + this.response[i].name + "</td><td>" + this.response[i].age + "</td></tr>"; } } else { alert("请求失败,状态码:" + this.status); } }; // 发送请求 xhttp.send(); }

3、创建一个名为get_data.php的PHP文件,用于从服务器获取新数据,这里我们只是简单地返回一些示例数据。

<?php header(ContentType: application/json); $data = array( array("name" => "张三", "age" => 25), array("name" => "李四", "age" => 30), array("name" => "王五", "age" => 28) ); echo json_encode($data); ?>

现在,当你点击“刷新表格”按钮时,表格将使用AJAX从服务器获取新数据并更新。

更新时间 2024-05-22 13:36:26