ajax数据请求2(json格式)
2016-09-12 16:05
417 查看
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] }
相关文章推荐
- 发送Ajax请求获取JSON格式数据
- django通过ajax发起请求返回JSON格式数据的方法
- java ajax post跨域请求传递json格式数据问题
- Ajax核心XMLHttpRequest对象、(发送请求、接收)方法和属性介绍、AJAX开发框架、数据格式提要(XML、JSON、HTML)
- SpringMVC环境下实现的Ajax异步请求(JSON格式数据) 推荐
- ajax请求后台,返回json格式数据,模板!
- ajax处理请求,以JSON数据格式返回,(json时间日期返回时对象---》日期格式)
- 使用jQuery发送POST,Ajax请求返回JSON格式数据
- SpringMVC环境下实现的Ajax异步请求JSON格式数据
- 配置ajax请求springmvc返回json格式数据
- 在ajax请求中使用json数据格式
- 使用Ajax发送Struts2请求返回JSON数据格式
- ThinkPHP以jquery传送json数据格式的方式实现ajax请求
- ajax数据请求3(数组json格式)
- ajax请求返回Json格式数据如何循环输出成table形式
- ajax请求返回的Json格式数据循环输出
- django通过ajax发起请求返回JSON格式数据的方法
- Ajax实现异步操作实例_针对JSON格式的请求数据
- Ajax请求ashx 返回 json 格式数据常见问题
- ajax请求数据,返回json数据格式