ajax tr td_示例代码

温馨提示：这篇文章已超过287天没有更新，请注意相关的内容是否还可用！

AJAX（Asynchronous JavaScript and XML）是一种用于在不刷新整个页面的情况下与服务器进行数据交互的技术。它可以通过异步请求从服务器获取数据并将其动态地显示在网页上，提高了用户体验和页面的响应速度。

在网页中使用AJAX技术，可以通过创建XMLHttpRequest对象来发送异步请求。下面是一个使用AJAX技术获取数据并动态更新表格的示例代码：


<!DOCTYPE html>
<html>
<head>
    <title>AJAX示例</title>
    <script>
        function loadTableData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var response = JSON.parse(this.responseText);
                    var table = document.getElementById("myTable");
                    for (var i = 0; i < response.length; i++) {
                        var row = table.insertRow(i + 1);
                        var cell1 = row.insertCell(0);
                        var cell2 = row.insertCell(1);
                        cell1.innerHTML = response[i].name;
                        cell2.innerHTML = response[i].age;
                    }
                }
            };
            xhttp.open("GET", "data.json", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <button onclick="loadTableData()">加载数据</button>
    <table id="myTable">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </table>
</body>
</html>

在这个示例代码中，我们首先创建了一个XMLHttpRequest对象（xhttp），然后定义了一个回调函数（onreadystatechange），该函数将在异步请求的状态发生变化时被触发。在回调函数中，我们首先检查了异步请求的状态和响应的HTTP状态码，确保请求成功返回。然后，我们使用JSON.parse()方法将返回的JSON字符串解析为JavaScript对象。接下来，我们获取了表格元素（myTable），并使用insertRow()和insertCell()方法动态地创建了表格行和单元格。我们将从服务器获取的数据填充到表格中。

通过点击"加载数据"按钮，我们可以触发loadTableData()函数，该函数会发送一个GET请求到服务器上的"data.json"文件，获取数据并将其动态地显示在表格中。这样，我们就实现了通过AJAX技术获取数据并动态更新表格的功能。

ajax tr td_示例代码

相关阅读