<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="1.jpg" width="100">
<button onclick="f()">点击一下</button>
<table border="2px" id="nid"></table>
</body>
</html>
<script>
function f(){
//创建对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//请求
xmlhttp.open("GET","2.json",true);
xmlhttp.send();
//响应
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var a = xmlhttp.responseText; //接收服务器返回的文本内容。然后进行赋值
var data = JSON.parse(a);
// JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。可以使用 JSON.parse() 方法将数据转换为 JavaScript对象。
var students = data.students;
for (var i = 0;i<students.length;i++){
var text_id = document.createTextNode(students[i].id);
var text_name = document.createTextNode(students[i].name);
var td_id = document.createElement("td");
var td_name = document.createElement("td");
var tr = document.createElement("tr");
td_id.append(text_id);
td_name.append(text_name);
tr.append(td_id);
tr.append(td_name);
var table = document.getElementById("nid");
table.append(tr);
}
}
}
}
</script>
json 的数据获取输出
最新推荐文章于 2023-04-18 10:54:18 发布