ajax数据请求2（json格式）
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格式）的更多相关文章
- SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析
SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...
- springmvc通过ajax异步请求返回json格式数据
jsp 首先创建index.jsp页面 <script type="text/javascript"> $(function () { $("#usernam ...
- servlet与ajax数据交换（json格式）
JSON数据格式: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于的一个子集. JSON采用完全独 ...
- ajax数据请求3（数组json格式）
ajax数据请求3(数组json格式) <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- ajax接收遍历处理json格式数据
ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面. 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做data的jso ...
- ajax数据请求5（php格式）
ajax数据请求5(php格式): <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- 把数据转化为JSON格式用ajax进行前后端交互
接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据 前端页面,submit.html <!DOCTYPE ...
- ajax数据请求4（xml格式）
ajax数据请求4(xml格式): <!doctype html> <html> <head> <meta charset="utf-8" ...
- 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回
作者:ssslinppp 时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...
随机推荐
- Linux系统档案与文件系统的压缩与打包
以下文章基于centos6.5 文章引自:http://www.jb51.net/LINUXjishu/105916.html 一.Linux下常见的压缩指令 在linux的环境中,压缩文件的扩展名大 ...
- composer安装及使用说明和相关原理文档
一.安装composer: 1.官方安装方法见https://getcomposer.org/download/ 2.本人安装方法: ①先配好yum源(不会配置的见博客如何制作自己的yum源),我 ...
- nodeJS中的包
前面的话 Node组织了自身的核心模块,也使得第三方文件模块可以有序地编写和使用.但是在第三方模块中,模块与模块之间仍然是散列在各地的,相互之间不能直接引用.而在模块之外,包和NPM则是将模块联系起来 ...
- ASP实现计算机爱好者网站，可以直接浏览
利用ASP制作的计算机爱好者协会网站,内容比较全面,具有母版和子页的功能,利用ACCESS数据库进行资源存储.适合新手学习和网页制作比赛参考 下载地址:http://download.csdn.net ...
- 类设计的SOLID原则
SOLID原则是面向对象范式的核心 单一职责原则(Single Responsible Principle, SRP):对于一个类,应该仅有一个引起它变化的原因.其基础是内聚,表示类完成单一功能的程度 ...
- Linux下Samba服务器的安装和配置
第一步:sudo apt-get install samba smbclient 安装samba服务器. 第二步:打开/etc/samba/smb.conf文件,在末尾添加下面的字段: [用户名] c ...
- R绘图字体解决方案（转）
COS论坛里面经常会遇到的一个问题就是绘图时中文字体怎么解决.最初,一个流行的方法是使用family = "GB1",但一般这样做出来的图比较难看,而且并没有完全解决问题.后来发现 ...
- spring.handlers、spring.schemas、spring.tooling被覆盖的三种解决方式
在用到spring时,本地IDE里面跑的很正常,但是打jar包后在集群上运行时报错. 查找资料后确定了问题的根源,由于在依赖中调用了spring的许多包,每个包都有自己的spring.schemas文 ...
- python标准库]Hashlib
hashlib主要提供字符加密功能,将md5和sha模块整合到了一起,支持md5,sha1, sha224, sha256, sha384, sha512等算法. 在学习hashlib模块之前,先来看 ...
- CentOS7安装PostgreSQL9.4
这次选择的数据库安装的是run 文件,更容易掌握.这次数据库全是默认安装,如果有需求的可以自行修改一下的. 这是我的第一篇博客,各位观众老爷,如果觉得哪里有什么不好的,可以留言一起探讨,探讨.有什么问 ...