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. Visual Studio Package 插件开发之自动生成实体工具

    前言 这一篇是VS插件基于Visual Studio SDK扩展开发的,可能有些朋友看到[生成实体]心里可能会暗想,T4模板都可以做了.动软不是已经做了么.不就是读库保存文件到指定路径么…… 我希望做 ...

  2. Log4j2 — Log4j2导入、LogEvent、配置文件编写及路径

    1. Log4j2的导入 首先到http://logging.apache.org/log4j/2.x/download.html 上下载最新的log4j2的jar包,然后再eclipse中加入log ...

  3. 消息队列RabbitMQ与Spring集成

    1.RabbitMQ简介 RabbitMQ是流行的开源消息队列系统,用erlang语言开发.RabbitMQ是AMQP(高级消息队列协议)的标准实现. 官网:http://www.rabbitmq.c ...

  4. spring-定时器(2)

    Spring提供的三种定时任务机制及其比较 定时任务的需求在众多应用系统中广泛存在,在Spring中,我们可以使用三种不同的定时机制,下面一一描述并加以比较 1. 基于Quartz的定时机制 下面详细 ...

  5. mysql数据库小常识

    什么是数据库? 计算机处理和存储的一切信息都是数据. 计算机系统中一种用于存储数据的程序. 一种:计算机系统中有很多种能够存取数据的程序. 他们各有特长和长处,有自己的适用范围. 存取:能够保存数据避 ...

  6. 无声的吐槽csdn

    上次朋友聚会,说csdn挺好的,我琢磨着,那好我也去注册一个.经过n次的注册(用户名那边老是验证不过,不给中文开头,然后随便填了一个),终于搞定了! 我想,不错啊,做了这么多限制,挺安全的感觉.然后我 ...

  7. C语言数组之冒泡排序+折半查找法（二分查找）

    冒泡排序算法 将相邻的元素进行两两比较,大的向后"冒", 小的向前"赶". 口诀: N个数字来排队,两两比较小靠前 外层循环N-1(控制需要比较的轮数). 内层 ...

  8. npm 一条命令更换淘宝源

    一条命令更换淘宝源 npm config set registry https://registry.npm.taobao.org

  9. 【小练习04】HTML+CSS--医药健康小页面

    要求实现如下效果图: 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  10. js 次方 开方

    次方 ,用Math.pow(值,次方数) 如: Math.pow(3,2);   3的平方 Math.Pow(2,3);   2的立方 开方Math.sqrt(值) 如: Math.sqrt(9);  ...