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文件的地址即可）的更多相关文章

  1. .net通过url访问服务器获取服务器返回数据

    一.url为http协议 1.普通调用: public string GetInfo(string url) { //访问http方法 string strBuff = ""; U ...

  2. 02 - Unit01：服务器返回数据的json处理+搭建项目环境

    服务器返回数据的json处理+搭建项目环境 服务器返回数据的json处理 springMVC JSP响应流程 请求 -->DispatcherServlet -->HandlerMappi ...

  3. Postman----模拟服务器返回数据

    使用场景:在某些情况下,比如A接口还没开发好,我们需要测试B接口,刚好B接口的请求数据中需要包含A接口返回的数据,这时我们就可以模拟A接口服务器返回的数据来测试B接口 解决办法: 举例:模拟此 htt ...

  4. datatables 服务器返回数据后的处理-表格数据属性的操作方法(ajax.dataSrc)

    http://dt.thxopen.com/reference/option/ajax.dataSrc.html http://datatables.net/reference/option/ajax ...

  5. 用ajax的同步请求解决登陆注册需要根据服务器返回数据判断是否能提交的问题

    最近在写www.doubilaile.com的登陆注册.需要用ajax请求服务器判断用户名是否存在,用户名和密码是否匹配,进而提交数据.碰到的问题是异步请求都能成功返回数据,但是该数据不能作为紧接着的 ...

  6. ICE学习第四步-----客户端请求服务器返回数据

    这次我们来做一个例子,流程很简单:客户端向服务器发送一条指令,服务端接收到这条指令之后,向客户端发送数据库中查询到的数据,最终显示在DataGridView上. 根据上一篇文章介绍的Slice语法,我 ...

  7. Vue动态添加v-model绑定及获取其返回数据

    从数据库拿到的动态数据绑定到页面对应的v-model或者v-bind上,并且根据对页的操作获取到返回的值: 1.首先在data里定义一个数据 timeTip 为一个空数组 data () { retu ...

  8. jQuery的ajax请求express服务器返回数据

    html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. AJAX服务器返回数据 连接数据库查询数据

    getcustomer.asp" 中的源代码负责对数据库进行查询,然后用 HTML 表格返回结果: <% response.expires=-1 sql="SELECT * ...

随机推荐

  1. 顶级、块级、内联,html元素的三大分类

    学习html后, 你会了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等.如果将这些元素细分, 又可以分别归为顶级(top-level)元 ...

  2. CISP/CISA 每日一题 10

    CISA 每日一题(答)一个合理建造的数据仓库应当支持下列三种基本的查询格式: 1.向上溯源和向下溯源——向上溯源是对数据进行总计:向下溯源是将数据进行细化: 2.交叉溯源——通过通用属性访问数据仓库 ...

  3. 阶段复习-.NET下托管资源与非托管资源的小记

    托管资源由由程序员负责分配,在系统的二级缓存中,GC自动回收释放:而非托管资源也是由程序员负责分配,资源的释放回收也是由程序员负责,使用Dispose或者析构函数对资源进行回收,常见的非托管资源是包装 ...

  4. 洛谷 P2908 [USACO08OPEN]文字的力量Word Power

    P2908 [USACO08OPEN]文字的力量Word Power 题目描述 Farmer John wants to evaluate the quality of the names of hi ...

  5. OSX: 逻辑卷管理系统Core Storage(1)

    Mac高大上嘛? Mac由于贵就高大上了?Mac由于没有这个哪个就不高大上了?本文没有结论,仅仅是回归技术本源,是不是高大上还要大家自己评说. 大多数Mac用户可能并不在乎苹果的OS X操作系统缺少一 ...

  6. activity-栈相关属性

    1.启动任务栈 第一种,动作设置为“android.intent.action.MAIN”,类别设置为“android.intent.category.LAUNCHER”,可以使这个ACT(activ ...

  7. Nginx日志优化

    一 日志轮训切割 [root@centos7 tools]# cat nginx_log.sh #!/bin/bash cd /var/log/nginx/ &&\ /bin/mv a ...

  8. 1.15 Python基础知识 - 函数

    函数是可重用的程序代码段. 一.函数的声明和调用 声明格式: def 函数名([形参列表]): 函数体 调用格式: 函数名([实参列表]) 函数名:是一种标识符,命名规则为全小写字母,可以使用下划线增 ...

  9. OpenAL音频播放

    // // OpenALPlayer.m // live // // Created by lujunjie on 2016/11/5. // Copyright © 2016年 lujunjie. ...

  10. .NET中StringBuilder用法实例分析

    string s1 = "33"; string s2 = "44"; string s3 = "55"; //需求是把s1 s2 s3拼接 ...