ajax数据请求2(json格式)
2024-10-19 03:24:34
ajax数据请求2(json格式)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax2(json格式)</title>
</head>
<body>
<button id="btn">数据请求</button>
<ul id="list"></ul>
<script type="text/javascript">
var btn = document.getElementById('btn');
var list = document.getElementById('list');
btn.onclick = function() {
//1.创建XMLHttpRequest对象
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//2.打开与服务器的链接
xhr.open('get','test2.json?_',true);
//3.发送给服务器
xhr.send(null);
//4.响应就绪
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var json = JSON.parse(xhr.responseText);
// console.log(xhr.responseText);
for (var i = 0; i < json.name.length; i ++) {
// list.innerHTML += '<li>姓名:' + json.name[i] + ', 性别:' + json.sex[i] + ', 年龄:' + json.age[i] + ', 成绩:' + json.score[i] + '</li>';
list.innerHTML += '<li>姓名:' + json.name[i] + ', 性别:' + json.sex[i] + ', 年龄:' + json.age[i] + ', 成绩:' + json.score[i] + '</li>';
}
// console.log(json.name.length);
}else {
alert(xhr.status);
}
}
}
}
</script>
</body>
</html>
json对象:
{
"name":["老王","老宋","老赵","老刘"],
"sex":["男","女","男","女"],
"age":[22,23,34,44],
"score":[66,77,88,99]
}
最新文章
- js模拟抛出球运动
- akka优势
- CF 371C-Hamburgers[二分答案]
- Nest查询示例
- 信息安全系统设计基础课程实践:简单TUI游戏设计
- python 键值对的树实现
- WebSphere 集群环境下配置 Quartz集群
- Spring配置概述
- Unicode和字符集小结
- GBT28181中的RTP
- win7+vs2008+opencv
- rem与em
- Spring Security入门(3-9)Spring Security登录成功以后
- process.argv
- Android 开发 CoordinatorLayout 协调者布局 与 ConstraintLayout约束布局 两者的关系
- ping不通公网ip时路由器设置
- Python3绘图库Matplotlib(01)
- redis 连接 docker容器 6379端口失败
- Xcode添加全局引用文件pch
- (转) 史上最简单的 SpringCloud 教程 | 第一篇: 服务的注册与发现(Eureka)
热门文章
- Java学习笔记--链表
- 简单的记录,VMware Tools的安装
- 【转】解决response.AddHeader(";Content-Disposition";, ";attachment; fileName="; + fileName) 中文显示乱码
- java集合(2)- java中HashMap详解
- Android Weekly Notes Issue #258
- rownum基本用法
- python 之走坑的道路
- Java中关键词之this,super的使用
- 线程(java课堂笔记)
- 做一枚精致的程序猿,Fighting!