ajax样式演示

以下是一段Ajax的演示代码,实现了通过Ajax获取后台数据并将其显示到前台页面上。

HTML文件:

html 复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax演示</title>
  </head>
  <body>
    <h1>学生信息表</h1>
    <table id="result">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>地址</th>
        </tr>
      </thead>
      <tbody>
        <!-- 数据填充位置 -->
      </tbody>
    </table>
    <button onclick="loadData()">加载数据</button>
  </body>
  <script src="./js/ajax.js"></script>
</html>

JavaScript文件:

javascript 复制代码
function loadData() {
  // 创建一个XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 设置请求地址和请求方法
  xhr.open("GET", "/api/students", true);
  // 注册回调函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        // 请求成功,解析响应数据
        var json = JSON.parse(xhr.responseText);
        // 获取表格数据填充位置
        var tbody = document.querySelector("#result tbody");
        // 清空表格内容
        tbody.innerHTML = "";
        // 遍历响应数据,生成表格内容
        for (var i = 0; i < json.length; i++) {
          var tr = document.createElement("tr");
          tr.innerHTML = "<td>" + json[i].id + "</td><td>" + json[i].name + "</td><td>" + json[i].age + "</td><td>" + json[i].address + "</td>";
          tbody.appendChild(tr);
        }
      } else {
        // 请求失败,提示错误信息
        alert("请求数据失败:" + xhr.status);
      }
    }
  };
  // 发送Ajax请求
  xhr.send();
}

运行以上代码,点击"加载数据"按钮,页面会通过Ajax向后台请求学生数据,并将其显示在表格中。该代码中,通过XMLHttpRequest对象向后台发起GET请求,获取学生数据。当请求完成后,根据响应状态码和响应数据进行相应处理。如果请求成功,则解析响应数据,生成表格内容;否则,提示错误信息。

相关推荐
hj5914_前端新手3 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法3 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku4 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode4 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu4 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu4 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu4 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu4 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu4 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在4 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net