在同源js目录下新建.txt文件

{

  "news":[

    {"title":"审计管理","time":"2018-03-10 21:00"},

    {"title":"菜单管理","time":"2018-03-10 21:00"},

    {"title":"订单管理","time":"2018-03-10 21:00"},

    {"title":"合同管理","time":"2018-03-10 21:00"},

    {"title":"物流管理","time":"2018-03-10 21:00"},

    {"title":"行政管理","time":"2018-03-10 21:00"},

    {"title":"人事管理","time":"2018-03-10 21:00"},

    {"title":"购物管理","time":"2018-03-10 21:00"},

    {"title":"批发管理","time":"2018-03-10 21:00"},

    {"title":"安全管理","time":"2018-03-10 21:00"},

    {"title":"账号管理","time":"2018-03-10 21:00"},

    {"title":"财务管理","time":"2018-03-10 21:00"},

    {"title":"其他管理","time":"2018-03-10 21:00"}

  ]

}
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>news</title>

        <link rel="stylesheet" href="css/index.css" />

        <script src="js/jquery.js"></script>

        <script>

            $(document).ready(function(){

                  var result = $.ajax({

                      url:"./newsData.txt",

                      async:false,

                      dataType: "json"

                  });

                  result = $.parseJSON(result.responseText);//转换为JSON格式

                  var news = result.news;

                  var htmlObj = '';

                  for(var i=0;i<news.length;i++){    //循环生成列表

                      htmlObj += '<li class="newsItem">'+news[i].title+'<span>'+news[i].time+'</span></li>';

                  }

                  $('.newsList').html(htmlObj);    //替换html里的内容

            });

        </script>

    </head>

    <body>

        <h2>News</h2>

        <ul class="newsList">

        </ul>

    </body>

</html>

js只有单线程

同步：等接口数据返回完了再往下一行一行执行

异步：放着这个请求先不管，往下执行

js单线程，一行一行往下执行（同步），但是如果请求接口，接口返回数据会延迟，

这个时候如果用异步，就能避免等待太久，直接执行下面的代码

但是他先执行下面代码的时候 需要数据咋办呢  接口还没给数据的时候？

所以，就有回调函数这个说法

回调函数就是你异步请求完数据之后要做的事

你在回调函数里就能写你拿到数据之后要做的事了

【总结整理】json数据请求简化版理解（祺哥的成果）的更多相关文章

  1. XML 数据请求与JSON 数据请求

    (1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer,另外结合第三方框架 XMLD ...

  2. 使用 AFNetworking 进行 XML 和 JSON 数据请求

    (1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer,另外结合第三方框架 XMLD ...

  3. 关于跨域读取json数据我的理解

    这两天在做关于读取json数据的插件,想用getJSON读取数据: $.getJSON(http://www.xxxx.com/Titles.js, function (data) { console ...

  4. ajax数据请求的理解

    一,请求 发送请求有两种方式:get 跟 post . 1.get仅请求数据,不需要服务端做处理,最后会返回指定的资源. 2.post可以提交数据,服务端根据提交的数据做处理,再返回数据. 二,创建X ...

  5. springmvc学习笔记(18)-json数据交互

    springmvc学习笔记(18)-json数据交互 标签: springmvc springmvc学习笔记18-json数据交互 springmvc进行json交互 环境准备 加入json转换的依赖 ...

  6. Django之AJAX传输JSON数据

    目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...

  7. AJAX 跨域请求 - JSONP获取JSON数据

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  8. AJAX 跨域请求的解决办法：使用 JSONP获取JSON数据

    由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...

  9. 【转】AJAX 跨域请求 - JSONP获取JSON数据

    来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...

随机推荐

  1. C#中的线程（一）入门

    C#中的线程(一)入门   Keywords:C# 线程Source:http://www.albahari.com/threading/Author: Joe AlbahariTranslator: ...

  2. UVA - 11107 Life Forms (广义后缀自动机)

    题意:给你n个字符串,求出在超过一半的字符串中出现的所有子串中最长的子串,按字典序输出. 对这n个字符串建广义后缀自动机,建完后每个字符串在自动机上跑一遍,沿fail树向上更新所有子串结点的出现次数( ...

  3. sklearn实践_普通线性回归

    import pandas as pd import numpy as np import matplotlib.pyplot as plt data = pd.read_csv(r"C:\ ...

  4. LeetCode Perfect Number

    原题链接在这里:https://leetcode.com/problems/perfect-number/#/description 题目: We define the Perfect Number ...

  5. OpenJudge9278:旅行

    总时间限制:  10000ms 单个测试点时间限制:  1000ms 内存限制:  131072kB 描述 转眼毕业了,曾经朝夕相处的同学们不得不都各奔东西,大家都去了不同的城市开始新的生活.在各自城 ...

  6. 使用POI导出excel进阶篇

    进阶篇就是涉及到合并单元格了.就是某一列相同的单元格需要合并为一个,并分为多个sheet. 效果如图: 直接上代码,需要提供的数据自己搞,传到工具类里面就好. JcExcelVoSuper.java ...

  7. linux开发核心理解

    目录 授权 致谢 序言 更新纪录 导读 如何写作科技文档 I. 气候 1. GUI? CLI? 2. UNIX 缩写风格 3. 版本号的迷雾 4.   Vim 还是 Emacs 5.   DocBoo ...

  8. javascript switch continue break 执行语句

    1:switch 关键字段:switch(n).case.break.default switch(n) :n是一个表达式 或者是一变量,用来与其下的各种case进行匹配,比如:此时的day输出的是 ...

  9. C++空类大小

    class a {};class b{};class c:public a{ virtual void fun()=0;};class d:public b,public c{}; 类a,b明明是空类 ...

  10. rabbitmq -- networking

    RabbitMQ大名鼎鼎, 其networking 部分经常被众多Erlang 程序员, 爱好者分析. 小的时候就见到很多人写过这方面的blog, 比如: 1, http://www.blogjava ...