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 ...
随机推荐
- 【原创】JQWidgets-TreeGrid 2、初探源码
已知JQWidgets的TreeGrid组件依赖于jqxcore.js.jqxtreegrid.js,实际上它还依赖于jqxdatatable.js.我们先通过一个例子,来探索本次的话题. 需求: 图 ...
- 关于初学loadrunner的心得体会
自参加工作两年以来,深感个人知识底蕴浅薄,为此,自身也在多方寻找所需业务技能.loadrunner负载测试工具,作为性能测试典型工具之一,对于我个人的知识的丰富化起到一定作用,但也仅仅是对工作能力的略 ...
- PHP简单分页省略中间页码
<?php /** * @desc created by sublime text3 * @author jxl <[57953279@qq.com>]> * @since 2 ...
- 1.WF 4.5在项目中直接使用的问题
最近公司需要在互联网产品后台进行精细化流程管理,开发了一个基于WF 4.5框架的流程引擎与图形化设计器,让流程真正的跑了起来. 基于Visual Studio 直接设计流程主要面临以下的问题: 1.需 ...
- MySql学习笔记(一) —— 数据的分组
前面介绍的聚集函数只是用来计算行数,平均数,最大值,最小值而不用检索所有数据.通过count()函数,我们可以计算生产商1003提供的产品数目,但如果我要查询所有生产商提供的商品数,这就需要进行分组查 ...
- java web 数据库开发1
一个完整的数据库部署架构通常由客户端和服务器端两部分组成.客户端封装数据库请求将其发送给服务器端,服务器端执行完毕将其及结果返回给服务器端. 以mysql为例 介绍java应用程序对数据库的访问 JD ...
- R语言快速深度学习进行回归预测（转）
深度学习在过去几年,由于卷积神经网络的特征提取能力让这个算法又火了一下,其实在很多年以前早就有所出现,但是由于深度学习的计算复杂度问题,一直没有被广泛应用. 一般的,卷积层的计算形式为: 其中.x分别 ...
- 项目管理之 SVN 管理软件 CornerStone for Mac
常用的项目管理有 Git 和 SVN.之前公司一直使用的是 Git,使用的是 SourceTree 客户端,据说 Git 比 SVN 要好,只能说各有特点吧,有兴趣的可以查看下两个的区别. 下面是学习 ...
- js的event事件
一 . 焦点:使浏览器能够区分区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置焦点 1.点击 2.tab 3.js 不是所有元素都能够接受 ...
- hdu3622
hdu3622 题意 每回合给定两个坐标点,可以选择一个放置炸弹,自己决定炸弹的半径,问 n 个回合后,使炸弹半径最小值最大. 分析 存在对立关系:每回合只能选择一个地方放置炸弹.i 表示 第一个位置 ...