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. Linux下Oracle的启动和关闭

    默认情况下,Linux下Oracle是不会随系统自动启动的. 1.启动Oracle 1.以oracle账户登录到CentOS,或者切换到oracle用户权限 # su – oracle  2.然后输入 ...

  2. OpenCV探索之路（五）：图片缩放和图像金字塔

    对图像进行缩放的最简单方法当然是调用resize函数啦! resize函数可以将源图像精确地转化为指定尺寸的目标图像. 要缩小图像,一般推荐使用CV_INETR_AREA来插值:若要放大图像,推荐使用 ...

  3. 【JAVAWEB学习笔记】17_jsp

    动态页面技术(JSP/EL/JSTL) 学习目标 案例:完成商品的列表的展示 一.JSP技术 1．jsp脚本和注释 jsp脚本: 1)<%java代码%> ----- 内部的java代码翻 ...

  4. JSP servlet的配置与使用

    1. servlet 的配置文件内容如下所示 <servlet>     <description>This is the description of my J2EE com ...

  5. Hierarchy Viewer工具使用

    目前,在eclipse的ADT Android插件中,还不能启动Hierachy Viewer,但可以从Android SDK工具包中,通过命令行的方式可以启动,具体方法为,到Android SDK下 ...

  6. 第 12 章 MySQL 可扩展设计的基本原则

    前言: 随着信息量的飞速增加,硬件设备的发展已经慢慢的无法跟上应用系统对处理能力的要求了.此时,我们如何来解决系统对性能的要求?只有一个办法,那就是通过改造系统的架构体系,提升系统的扩展能力,通过组合 ...

  7. javaWeb学习总结（7）-关于session的实现：cookie与url重写

    本文讨论的语境是java EE servlet.我们都知道session的实现主要两种方式:cookie与url重写,而cookie是首选(默认)的方式,因为各种现代浏览器都默认开通cookie功能, ...

  8. 关于微信小程序的的总结

    微信小程序学完了,给大家分享一些自己学小程序的心得,希望能帮到大家. 首先,我谈谈小程序数据绑定的那一块,所有从本地或者远程服务器的API传过来,都必须绑定到data: {}, 绑定格式是一个一个的键 ...

  9. 你为什么必须（从现在开始就）掌握linux

    写在前面 在我看来,人人都应该学习linux,但这不是本文探讨的重点.本文主要从软件测试人员的角度谈谈学习和掌握linux的重要性.必要性.紧迫性. 另外: 这里所说的linux系统,是unix系统和 ...

  10. SpringMVC——请求映射

    SpringMVC中,如何处理请求是很重要的任务.请求映射都会使用@RequestMapping标注.其中,类上的标注相当于一个前缀,表示该处理器是处理同一类请求:方法上的标注则更加细化.如,类的标注 ...