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. shell项目-分发系统-expect讲解

    shell项目-分发系统-expect讲解 yum install -y expect 1. 自动远程登录 #! /usr/bin/expect set host "192.168.133. ...

  2. python 中文文档地址总结

    sqlalchemy: https://www.imooc.com/article/details/id/22343

  3. Spider_selenium

    json模块 什么是json? javascript中的对象和数组 对象:{key:value}取值:对象名.key 数组:[...,...]取值:数组[索引值] 作用 json格式的字符串和Pyth ...

  4. LayoutAnimation-容器动画

    1.LayoutAnimation的作用主要就是加载到一个layout上,让这个layout里面的所有控件都有相同的动画效果.现在用到的是在listview中添加动画,使得它每一个item都是滑落显示 ...

  5. 支持10W高并发请求的IIS Web服务器常用设置

    支持高并发的IIS Web服务器常用设置   适用的IIS版本:IIS 7.0, IIS 7.5, IIS 8.0 适用的Windows版本:Windows Server 2008, Windows ...

  6. HTML基础第七讲---框架

    转自:https://i.cnblogs.com/posts?categoryid=1121494 框架(Frame)也就是所谓的分割窗口.分割画面.框窗效果(还真是五花八门),这个技巧在运用上问题比 ...

  7. 微信消息体加解密及EncodingAESKey

    公众平台消息体签名及加解密方案概述 1.新增消息体签名验证,用于公众平台和公众账号验证消息体的正确性 2.针对推送给微信公众账号的普通消息和事件消息,以及推送给设备公众账号的设备消息进行加密 3.公众 ...

  8. angular反向代理

    第一步:根目录新建 proxy.conf.json target:就是代理的服务器地址. 接口地址必须是http://localhost:8081/api开头 { "/api":{ ...

  9. 【hihocoder 1564】同步H公司的终端

    [链接]http://hihocoder.com/problemset/problem/1564 [题意] 在这里写题意 [题解] 如下图 (上图中节点旁边的红色数字为它的权值) 从叶子节点开始考虑. ...

  10. Jenkins学习总结（1）——Jenkins详细安装与构建部署使用教程

    Jenkins是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 1.持续的软件版本发 ...