• ajax数据请求3(数组json格式)


    ajax数据请求3(数组json格式)

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>标题</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style>
    	*{margin:0; padding:0; list-style:none;}
    	
    </style>
    </head>
    <body>
    <button id="btn">请求数据</button>
    <ul id="list"></ul>
    <script>
    	var btn=document.getElementById('btn');
    	var list=document.getElementById('list');
    	btn.onclick=function (){
    		// 1.创建XMLHttpRequest对象
    		var xhr=null;
    		if (window.XMLHttpRequest) {// 非IE5/6
    			xhr=new XMLHttpRequest();//实例对象
    		} else{// IE5/6
    			xhr=new ActiveXObject('Microsoft.XMLHTTP');
    		};
    		// 2.打开与服务器的链接
    		xhr.open('get','test3.json?_='+new Date().getTime(),true);//生成不一样的url解决缓存问题
    		// 3.发送给服务器
    		xhr.send(null);//get请求
    		// 4.响应就绪
    		xhr.onreadystatechange=function (){
    			if (xhr.readyState==4) {//请求完成
    				if (xhr.status==200) {//ok
    					var json=JSON.parse(xhr.responseText);//解析成json对象
    					for (var i = 0; i < json.length; i++) {
    						list.innerHTML+='<li>姓名:'+json[i].name+', 性别:'+json[i].sex+', 年龄:'+json[i].age+', 成绩:'+json[i].score+'</li>';
    					};
    				} else{
    					alert(xhr.status);
    				};
    			};
    		}
    	}
    </script>
    </body>
    </html>
    

    josn对象:  

    [
    	{"name":"老王","sex":"女","age":19,"score":66},
    	{"name":"老刘","sex":"男","age":22,"score":72},
    	{"name":"老李","sex":"女","age":24,"score":85},
    	{"name":"老张","sex":"男","age":30,"score":96}
    ]
    

      

  • 相关阅读:
    Spring框架介绍及使用
    SpringMVC 网站
    Maven网站
    mysql数据库忘记密码时如何修改
    搭建ssm的步骤
    maven私服 Nexus2.x.x私服安装配置
    搭建聚合工程教案
    SVN上传下载项目
    如何区分不同用户——Cookie/Session机制详解
    java中Token验证
  • 原文地址:https://www.cnblogs.com/handsomehan/p/5865174.html
Copyright © 2020-2023  润新知