【总结整理】json数据请求简化版理解(祺哥的成果)
在同源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数据请求简化版理解(祺哥的成果)的更多相关文章
- XML 数据请求与JSON 数据请求
(1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer,另外结合第三方框架 XMLD ...
- 使用 AFNetworking 进行 XML 和 JSON 数据请求
(1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer,另外结合第三方框架 XMLD ...
- 关于跨域读取json数据我的理解
这两天在做关于读取json数据的插件,想用getJSON读取数据: $.getJSON(http://www.xxxx.com/Titles.js, function (data) { console ...
- ajax数据请求的理解
一,请求 发送请求有两种方式:get 跟 post . 1.get仅请求数据,不需要服务端做处理,最后会返回指定的资源. 2.post可以提交数据,服务端根据提交的数据做处理,再返回数据. 二,创建X ...
- springmvc学习笔记(18)-json数据交互
springmvc学习笔记(18)-json数据交互 标签: springmvc springmvc学习笔记18-json数据交互 springmvc进行json交互 环境准备 加入json转换的依赖 ...
- Django之AJAX传输JSON数据
目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...
- AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据
由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...
- 【转】AJAX 跨域请求 - JSONP获取JSON数据
来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...
随机推荐
- linux IP局域网监控工具——iptraf
iptraf iptraf是一款交互式.色彩鲜艳的IP局域网监控工具.它可以显示每个连接以及主机之间传输的数据量.下面是屏幕截图. $ sudo iptraf 安装iptraf: # Centos(基 ...
- hive_学习_02_hive整合hbase(失败)
一.前言 本文承接上一篇:hive_学习_01_hive环境搭建(单机) ,主要是记录 hive 整合hbase的流程 二.环境准备 1.环境准备 操作系统 : linux CentOS 6.8 jd ...
- POJ2411Mondriaan's Dream(DP+状态压缩 or 插头DP)
问题: Squares and rectangles fascinated the famous Dutch painter Piet Mondriaan. One night, after prod ...
- LeetCode Maximum Distance in Arrays
原题链接在这里:https://leetcode.com/problems/maximum-distance-in-arrays/description/ 题目: Given m arrays, an ...
- mysql之 mysql数据库压力测试工具(mysqlslap)
mysqlslap是从MySQL的5.1.4版开始就开始官方提供的压力测试工具.通过模拟多个并发客户端并发访问MySQL来执行压力测试,同时提供了较详细的SQL执行数据性能报告,并且能很好的对比多个存 ...
- angular.run 妙用
**1.浏览器判断**在angular做微信应用的时候,有时候我们也想把相同一份代码运行在非微信的浏览器上,这时候我们可以在angular的run上写点东西实现~例如asw.run函数里执行定义一个$ ...
- 第五篇 Nginx的简单配置
先安装: sudo apt-get install nginx php5-fpm 我是在新安装的Ubuntu13上测试通过的,真的只安装这两个东西就够了. 然后编辑配置文件. sudo gedit / ...
- ODP.NET OracleBulkCopy
using System;using System.Collections.Generic;using System.Linq;using System.Text;using Oracle.DataA ...
- RuPengWang项目
项目 Day1------------------------- 说明:建外键约束.ashx+Razor RupengWang创建三个类库Model DAL BLL后台:RupengWang.Admi ...
- UE4流关卡
转自:http://blog.ch-wind.com/ue4-level-streaming/ 流关卡可以使得关卡内容只在玩家“需要”的时候才加载,在很多游戏中都有使用这个技术. 当前UE4版本4.1 ...