ajax样式演示

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

HTML文件:


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

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 = "" + json[i].id + "" + json[i].name + "" + json[i].age + "" + json[i].address + "";
          tbody.appendChild(tr);
        }
      } else {
        // 请求失败，提示错误信息
        alert("请求数据失败：" + xhr.status);
      }
    }
  };
  // 发送Ajax请求
  xhr.send();
}

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

相关阅读:
Java：雇佣Java程序员来实现你的软件和应用目标!
vite + react + ts 配置路径别名alias
鸿蒙开发实例 | 鸿蒙原子化服务卡片开发完美体验
本科毕业论文研究结果与预期不符怎么办？
华为机试 - 模拟商场优惠打折
C++内存管理及内存问题的分析
【雕爷学编程】Arduino动手做（106）---US026超声波测距
Maven在IDEA中的使用，＜buid＞、＜properties＞标签
C++STL----＞vector
深入理解Huffman编码：原理、代码示例与应用

原文地址：https://blog.csdn.net/IKUNzhenin/article/details/134266581