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 ...
随机推荐
- Java_中建立0-10M的消息（字符串）
直接用StringBuilder,它的append方法方便快速构建字符串. StringBuilder sb1=new StringBuilder(); for(int i=0;i<1024*1 ...
- 弹出输入内容prompt
<script> window.onload = function(){ var oBtn = document.getElementById( "btn" ); oB ...
- 1-LPC1778建立工程
先来建立一个工程模板,,,要比32简单的多,假设32是用库开发的话,,,,因为还要把那些和库相关的文件加到工程里.... LPC呢就只需要把设置系统和总线的时钟文件(system_LPC177x_8x ...
- 8、单选按钮（JRadioButton）和复选框（JCheckBox）
8.单选按钮(JRadioButton)和复选框(JCheckBox) 实现一个单选按钮(或复选框),此按钮项可被选择或取消选择,并显示其状态.JRadioButton对象与ButtonGroup对象 ...
- Cassandra Issue with Tombstone
1. Cassandra is quicker than postgre and have lower change to lose data. Cassandra doesn't have fore ...
- javaWeb学习总结（1）- Tomcat服务器学习和使用(3)
一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下:
- API文档工具-Swagger的集成
最近安装了API文档工具swagger,因为Github上已有详细安装教程,且安装过程中没有碰到大的阻碍,所以此文仅对这次安装做一份大致记录 相关网站 Swagger 官方地址: http://swa ...
- BAYESIAN STATISTICS AND CLINICAL TRIAL CONCLUSIONS: WHY THE OPTIMSE STUDY SHOULD BE CONSIDERED POSITIVE（转）
Statistical approaches to randomised controlled trial analysis The statistical approach used in the ...
- TCP：三次握手、四次握手、backlog及其他
TCP是什么 首先看一下OSI七层模型: 然后数据从应用层发下来,会在每一层都加上头部信息进行封装,然后再发送到数据接收端,这个基本的流程中每个数据都会经过数据的封装和解封的过程,流程如下图所示: 在 ...
- 50几个photoshop快捷键
一.常用的热键组合 1.图层混合模式快捷键:正常(Shift + Option + N),正片叠底(Shift + Option + M),滤色(Shift + Option + S),叠加(Shif ...