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 * ...
随机推荐
- echarts插件-从后台请求的数据在页面显示空白的问题
最近的项目里面关于统计图方面的问题,有涉及到很多,也在博客里面更新了自己所遇到的问题,开发过程中会遇到很多问题,解决技术问题的方法也有千千万 图片.png 在百度上百度了一下,发现了问题所在之处,不得 ...
- 「微信小程序」有哪些冲击与机会？
昨天晚上相信大家的朋友圈被「微信小程序」刷屏了,这影响力赶上了国务院出台新政策一样,足以说明微信在中国的影响力之大. 然后今天公号后台一大堆人问我怎么看这件事,不少人非常忧虑,仿佛自己将要失业一样. ...
- C#如何调用非托管的C++Dll
现在在Windows下的应用程序开发,VS.Net占据了绝大多数的份额.因此很多以前搞VC++开发的人都转向用更强大的VS.Net.在这种情况下,有很多开发人员就面临了如何在C#中使用C++开发好的类 ...
- Unity3D教程：静态调用C#的dll
就像使用.net自带的那些程序集一样.加入Reference,然后使用就可以. 因为windows环境下的Unity编译脚本时,本质上还是生成.net程序集.并且其C#脚本编程事实上就是.net C# ...
- 一种较为隐蔽ConcurrentModificationException情形
ConcurrentModificationException是遍历过程中修改list而抛出的错误.就像前面分析的,单线程时这种错误主要是因为使用forEach造成:遍历一个拷贝,修改原始list,造 ...
- HTML基础第十讲---排版卷标
转自:https://i.cnblogs.com/posts?categoryid=1121494 网页的排版部份也是很重要的一环,有些现成的卷标就可以让您轻易的完成缩排或是一些特殊格式的编排喔! [ ...
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第一篇：准备工作
摘要 本文将简要介绍这个文章系列的目的.形式及大体内容.并且完成开始学习这个系列前所必要的准备工作. 前言 ASP.NET MVC作为微软官方的MVC解决方案,推出有一段时间了.可 ...
- rhel5安装 oracle11
readhat 安装11gr2文档 需要注意的地方:必须关掉的 1,防火墙:2,SElinux . root 用户运行 setup 命令可关防火墙与SElinux 修改网络配置文件,一定要重启此文 ...
- css基础属性
color:设置文本颜色:属性值:1.表示颜色的英文单词,例如:red.blue.green.pink.purple.cyan等:2.十六进制表示法:#ff0000: 0.1.2...9.a.b.c. ...
- CSS外边距合并（塌陷/margin越界）
原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...