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 * ...
随机推荐
- python3 时间处理
1 标记当前时间 import datetime from dateutil import tz #标记当前时间为中国时间 注意(replace 只有标记的意思没有转化的意思) datetime.da ...
- matplotlib散点图笔记
定义: 由一组不连续的点完成的图形 散点图: 包含正相关性,负相关性和不相关性. 散点图生成函数: plt.scatter(x,y) 演示代码如下: import numpy as np import ...
- 小米开源文件管理器MiCodeFileExplorer-源码研究(2)-2个单实例工具类
从本篇开始,讲解net.micode.fileexplorer.util工具包中的类.这个包下的类,功能也比较单一和独立.很多代码的思想和实现,可以用于JavaWeb和Android等多种环境中. 一 ...
- Input/output subsystem having an integrated advanced programmable interrupt controller for use in a personal computer
A computer system is described having one or more host processors, a host chipset and an input/outpu ...
- 【原创】k8s源代码分析-----EndpointController
转自本人空间 http://user.qzone.qq.com/29185807/blog/1459325937 一.controller manager创建endpointController 代码 ...
- Hadoop权威指南学习笔记三
HDFS简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考.有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.net/my ...
- Ajax跨域：Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- WPF MVVM示例自定义模板数据绑定
在触摸屏设备上.由于列表是的信息展示不是非常直观和便捷操作. 所以也就出现了很多用面板控件:类似win10的Metro风格, 所以抽空做了一个WPF面板控件. 话不多上 , 先上一个示例图. 为了便于 ...
- JS/CSS 全屏幕导航 – 从上到下动画
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- Jedis源码分析
http://blog.csdn.net/luyee2010/article/details/17580381