原生ajax发送请求得到json数据并渲染到table上

前言

本次例子只是一个小案例，首先我是使用php+mysql+Apache服务器写后端的，通过php查询mysql数据库中的数据，并将其转换为JSON格式。然后前端通过ajax发起 ‘GET’ 请求得到数据，通过动态操作表格，将数据渲染到页面上。这里我没有使用php嵌入的方式，因为主要学的是前端，想试着模拟一下前后端分离开发的方式。这也是我第一次在这里发帖，写得不好以及有讲错的或者讲得不够专业，希望有大佬能给我提一下，万分感谢！！！

以下是部分代码

var xhr = new XMLHttpRequest(); xhr.open('GET', "./demo.php", true); xhr.onload = function () { if ((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)) { var data = xhr.responseText; var person = JSON.parse(data); var table_node = document.getElementById("table"); // 创建 tbody节点 var tbody_node = document.createElement("tbody"); // 将 tbody 节点插入到表格中 table_node.appendChild(tbody_node); for (var key in person) { // 循环插入所有的行到 tbody 中 tbody_node.insertRow(key); person[key].gender = person[key].gender == 1 ? "男":"女"; for (var attribute in person[key]) { // 在tbody中的行中插入一个单元格 var td_node = tbody_node.rows[key].insertCell(-1); // 创建一个文本节点 var text_node = document.createTextNode(person[key][attribute]); // console.log(attribute.gender); td_node.appendChild(text_node); } } } else { alert("Request was unsuccessful :" + xhr.status); console.log(xhr.statusText); } } xhr.send(null);

如上代码，我讲一下我的思路:

创建一个XMLHttpRequest对象调用open()方法: xhr.open('GET', "./demo.php", true)，这行代码会启动一个针对demo.php的GET请求。但是这个方法并不会真正发送请求，而是启动一个请求准备发送。调用onload方法，先检查status属性，以确定响应已经成功返回。一般是将HTTP状态码为200作为成功的标志。此外状态码为304表示请求的资源并没有被修改，可以直接修改浏览器中缓存的版本。xhr.status >= 200 && xhr.status < 300 || xhr.status == 304。接着我们通过JSON.parse()来解析后端发送过来的JSON字符串。并通过动态操作table来将其渲染到页面上。其中我使用for-in()语句来枚举JSON对象，第一次for-in循环出每一个对象，根据 person[key].gender = person[key].gender == 1 ? “男”:“女” 改变性别的男女(因为数据库中传递过来的性别是0或1)再一次for-in语句()来循环出属性的值，并将其渲染到页面中去 4.最后调用send()方法，因为不需要通过请求体发送，故传入null

显示结果

这是我第一次在上发帖，来作为我学习的记录，如有写得不好的地方，希望能指出。如果还有更好的方法的话，可以一起交流一下，谢谢大家。