js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）
js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）
一、总结
ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可
var lii=document.createElement('li'); //3、dom动态创建元素document.createElement
div1.appendChild(lii) //4、dom动态给元素添加孩子
var obj=JSON.parse(str) //2、解析json：将json从字符串转化为数组或对象
二、js进阶ajax读取json数据
json中数据：
[
{
"name":"张三",
"id":123456,
"sex":"男",
"VIP":"lv1"
},
{
"name":"李四",
"id":123457,
"sex":"男",
"VIP":"lv3"
},
{
"name":"李丽",
"id":123458,
"sex":"女",
"VIP":"lv2"
}
]
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax01</title>
<style type="text/css">
div{
background: rgba(30,100,30,0.3);
width: 500px;
height: 500px;
letter-spacing: 5px;
padding: 5px
} </style>
<script type="text/javascript" src="ajax1.js"></script>
</head>
<body>
<input type="button" id="btn" value="测试按钮">
<div id="div1"></div>
<script>
var btn=document.getElementById('btn');
var div1=document.getElementById('div1');
btn.onclick=function (){
ajax('data.json',function(str){ //1、ajax读取json和读取普通文本，和读取链接都是一样的，在url处放上json文件的地址即可
var obj=JSON.parse(str) //2、解析json：将json从字符串转化为数组或对象
//alert(typeof obj)
for(var i in obj){
for(var j in obj[i]){
// div1.innerHTML+=j+':'+obj[i][j]+'<br>';
var lii=document.createElement('li'); //3、dom动态创建元素document.createElement
lii.innerHTML=j+':'+obj[i][j];
div1.appendChild(lii) //4、dom动态给元素添加孩子
} } },function(s){
alert(s)
})
}
</script>
</body>
</html>
js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）的更多相关文章
- .net通过url访问服务器获取服务器返回数据
一.url为http协议 1.普通调用: public string GetInfo(string url) { //访问http方法 string strBuff = ""; U ...
- 02 - Unit01：服务器返回数据的json处理+搭建项目环境
服务器返回数据的json处理+搭建项目环境 服务器返回数据的json处理 springMVC JSP响应流程 请求 -->DispatcherServlet -->HandlerMappi ...
- Postman----模拟服务器返回数据
使用场景:在某些情况下,比如A接口还没开发好,我们需要测试B接口,刚好B接口的请求数据中需要包含A接口返回的数据,这时我们就可以模拟A接口服务器返回的数据来测试B接口 解决办法: 举例:模拟此 htt ...
- datatables 服务器返回数据后的处理-表格数据属性的操作方法(ajax.dataSrc)
http://dt.thxopen.com/reference/option/ajax.dataSrc.html http://datatables.net/reference/option/ajax ...
- 用ajax的同步请求解决登陆注册需要根据服务器返回数据判断是否能提交的问题
最近在写www.doubilaile.com的登陆注册.需要用ajax请求服务器判断用户名是否存在,用户名和密码是否匹配,进而提交数据.碰到的问题是异步请求都能成功返回数据,但是该数据不能作为紧接着的 ...
- ICE学习第四步-----客户端请求服务器返回数据
这次我们来做一个例子,流程很简单:客户端向服务器发送一条指令,服务端接收到这条指令之后,向客户端发送数据库中查询到的数据,最终显示在DataGridView上. 根据上一篇文章介绍的Slice语法,我 ...
- Vue动态添加v-model绑定及获取其返回数据
从数据库拿到的动态数据绑定到页面对应的v-model或者v-bind上,并且根据对页的操作获取到返回的值: 1.首先在data里定义一个数据 timeTip 为一个空数组 data () { retu ...
- jQuery的ajax请求express服务器返回数据
html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- AJAX服务器返回数据 连接数据库查询数据
getcustomer.asp" 中的源代码负责对数据库进行查询,然后用 HTML 表格返回结果: <% response.expires=-1 sql="SELECT * ...
随机推荐
- colrm---删除文件制定列
- Python-Flask项目开发--为什么需要搭建虚拟环境？
在使用python开发过程中,需要使用到某些工具包/框架等,需要联网下载. 例如,联网安装Flask框架flask-0.10.1版本:pip install flask==0.10.1 此时, ...
- JNDI学习总结（4）——Tomcat下使用Druid配置JNDI数据源
com.alibaba.druid.pool.DruidDataSourceFactory实现了javax.naming.spi.ObjectFactory,可以作为JNDI数据源来配置. 一.下载D ...
- UVALive 5583 Dividing coins
Dividing coins Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Ori ...
- Android中的MVP架构初探
说来羞愧,MVP的架构模式已经在Android领域出现一两年了.可是到今天自己才開始Android领域中的MVP架构征程. 闲话不多说,開始吧. 一.架构演变概述 我记得我找第一份工作时,面试官问我& ...
- js37---Function.prototype
//给函数的prototype新增名字为name,函数体为fn的函数 Function.prototype.method =function(name,fn){ this.prototype[name ...
- android图片特效处理之光晕效果
这篇将讲到图片特效处理的图片光晕效果.跟前面一样是对像素点进行处理,本篇实现的思路可参见android图像处理系列之九--图片特效处理之二-模糊效果和android图像处理系列之十三--图片特效处理之 ...
- Android学习笔记进阶十一图片动画播放（AnimationDrawable）
大家平时见到的最多的可能就是Frame动画了,Android中当然也少不了它.它的使用更加简单,只需要创建一个 AnimationDrawabledF对象来表示Frame动画,然后通过addFrame ...
- Logstash整合Elasticsearch
1:启动Elasticsearch2:bin/logstash -e 'input { stdin { } } output { elasticsearch { host => localhos ...
- $.post()提交了数据,return不给跳转
本来Controller接到普通请求,return “somePage”,这样就跳转了.前台用$.post()提交了数据(不需要回调),我了个大草,return那里就不给跳转了这样怎么解决? ajax ...