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 * ...
随机推荐
- 今日 SGU 5.6
SGU 106 题意:问你有多少个<x,y>,满足ax+by+c=0,x1<=x<=x2,y1<=y<=y2 收货:拓展欧几里得求解的是这种方程,ax+by=1,g ...
- SDNU 1206.蚂蚁感冒 【代码如此简单，思维练习】【7月29】
蚂蚁感冒 Description 长100厘米的细长直杆子上有n仅仅蚂蚁. 它们的头有的朝左,有的朝右. 每仅仅蚂蚁都仅仅能沿着杆子向前爬,速度是1厘米/秒. 当两仅仅蚂蚁碰面时.它们会同一时候掉头往 ...
- IOS越狱开发错误解决
Questions: haseScriptExecution Run\ Script /Users/jun/Library/Developer/Xcode/DerivedData/ButtonMa ...
- highcharts 阶梯图表并填充颜色(自己觉得：直角折线图表)
例如以下:普通阶梯图 $(function () { $('#container').highcharts({ title: { text: '普通阶梯图' ...
- Qt 5.11的QChar、QString、QTextBoundaryFinder和双向文本算法现在完全兼容Unicode 10
本文翻译自:Qt 5.11 released 原文作者: Qt公司CTO兼Qt开源项目维护官Lars Knoll翻译校审:Richard.Hongfei.Haipeng 5月22日,我们提发布了Qt ...
- php实现希尔排序（总结）
php实现希尔排序(总结) 一.总结 1.希尔排序的算法思路:分组排序, 缩小增量排序,插入排序 2.算法思路: 循环非常好写 有几次gap:log2(n) 每次gap有几组:gap组 每组有几个元素 ...
- @JSONField 注解说明
转自:https://blog.csdn.net/suyimin2010/article/details/80617538 导入@JSONField 注解: import com.alibaba.fa ...
- 数据库中解析XML
简介:OPENXML方法使用一例实现导入功能 DECLARE @strProjGUID AS VARCHAR(50) DECLARE @strProjCode AS VARCHAR(50) DEC ...
- [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.0:compile (default-compile) 问题解决
问题描述详情: 无论你的问题是3.0还是3.1还是任何一个版本,则都可以通过以下版本来解决 解决办法: 把默认的Internal JRE改成了JAVA_HOME. 运行后成功了,截图如下:
- carousel轮播器
<div id="myCarousel" class="carousel slide" data-ride="carousel" st ...