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数据请求2（json格式）的更多相关文章

  1. SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析

    SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...

  2. springmvc通过ajax异步请求返回json格式数据

    jsp 首先创建index.jsp页面 <script type="text/javascript"> $(function () { $("#usernam ...

  3. servlet与ajax数据交换（json格式）

    JSON数据格式: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于的一个子集. JSON采用完全独 ...

  4. ajax数据请求3（数组json格式）

    ajax数据请求3(数组json格式) <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  5. ajax接收遍历处理json格式数据

    ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面. 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做data的jso ...

  6. ajax数据请求5（php格式）

    ajax数据请求5(php格式): <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  7. 把数据转化为JSON格式用ajax进行前后端交互

    接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据 前端页面,submit.html <!DOCTYPE ...

  8. ajax数据请求4（xml格式）

    ajax数据请求4(xml格式): <!doctype html> <html> <head> <meta charset="utf-8" ...

  9. 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

随机推荐

  1. loadrunner提高篇-场景设计实践

    集合点设置 一.为什么要进行集合点设置? 因为在测试过程中,并不能保证所有的Vuser都在同一时刻进行操作,这样就达不到并发测试的目的,故需要用到集合点技术,集合点的意思是如果在一个操作之前设置了一个 ...

  2. .Net程序员学用Oracle系列(26)：PLSQL 之类型、变量和结构

    1.类型 1.1.属性类型 1.2.记录类型 2.变量 2.1.变量类型 2.2.变量定义 2.3.变量赋值 3.结构 3.1.顺序结构 3.2.选择结构 3.3.循环结构 4.总结 1.类型 在&l ...

  3. VR全景是继互联网后的第二王朝吗？

    VR虚拟现实.VR全景广泛用于游戏中,带上VR眼镜,有身临其境般的感觉.于是近些年围绕着 "下一代计算平台",国内外兴起一股虚拟现实热,在这样的形势下,VR眼镜在国内打的十分火热. ...

  4. JBoss 主要模块

    JBoss EJB 容器是JBoss 服务器的核心实现.它有两个特征,第一个是在运行期间生产EJB对象的Stub 和Skeleton 类, 第二是支持热部署. JBossNS 是JBoss 命名服务用 ...

  5. jQuery使用记录

    jQuery方法获得的集合为类数组对象,可以用一些数组的方法.集合里面的元素为DOM元素,不是jQuery对象. jQuery设置css3属性的兼容性写法: $(element).css({ &quo ...

  6. 开涛spring3(6.6) - AOP 之 6.6 通知参数

    前边章节已经介绍了声明通知,但如果想获取被被通知方法参数并传递给通知方法,该如何实现呢?接下来我们将介绍两种获取通知参数的方式. 使用JoinPoint获取:Spring AOP提供使用org.asp ...

  7. ORACLE聚合函数细节

    select * from emp order by mgr; 概要 select count(1), --14 sum(1), --14 count(*), --14 count(distinct ...

  8. 【WPF】如何获取命令行参数

    应用程序以 Main 方法为入口点,如果为 Main 方法指定一个 string[] 类型的参数,在程序运行时,这个参数会获取到传递给应用程序的命令行参数. 而 WPF 应用程序比较特殊,因为在VS中 ...

  9. 论文笔记 Network In Network

    这篇论文思路简单.易实现.效果好,是一篇难得的佳作.从实现的角度理解,就是做了以下两个替换: 将线性卷积替换为多层感知机(某种程度上,线性卷积可以认为识一层感知机). 将全连接层用global ave ...

  10. std::cin>>

    cin>> 不吃最后的回车换行,字符串自动补'\0'与最后回车换行无关 时常忘记,紧记!