【总结整理】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 站点(流 ...
随机推荐
- 关于js序列化时间的方法
var time = new Date(); var otime = getMyDate(time); //将毫秒转换成 年月日+时分秒 格式的 (1970-01-11 00:00:00) funct ...
- 剑指Offer-翻转单词顺序
题目描述: 输入一个英文句子,翻转句子中单词的顺序,但单词内字符串的顺序不变.例如输入字符串:"I am a student",则输出"student a am I&qu ...
- unix的输入输出操作
unix的输入输出操作 使用的头文件 #include <unistd.h> #include <stdio.h> 函数说明 ssize_t read(int fd, void ...
- java多线程 生产者消费者案例-虚假唤醒
package com.java.juc; public class TestProductAndConsumer { public static void main(String[] args) { ...
- webpack 单页面应用实战
这篇文章将介绍如何利用 webpack 进行单页面应用的开发,算是我在实际开发中的一些心得和体会,在这里给大家做一个分享.webpack 的介绍这里就不多说了,可以直接去官网查看. 关于这个单页面应用 ...
- ERR_PTR PTR_ERR IS_ERR ERROR
在linux-x.xx/include/uapi/asm-generic/errno-base.h和errno.h里分别定义了返回错误的信息. errno-base.h: #ifndef _ASM_G ...
- 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...
- 使用POI导出excel基础篇
最近搞了下POI导出Excel,听说很多次,却是第一次搞. 在pom.xml中引入依赖 <dependency> <groupId>org.apache.poi</gro ...
- 操作Oracle 一条龙
1 引用Oracle.DataAccess.dll 2 App.Config中配置连接字符串: Data Source=(DESCRIPTION = (ADDRESS = (PROTOCOL = TC ...
- GUI练习中
总结:JFrame和Frame是有很大差别的. 不要混淆.否则方法是不能成功调用的 特别是背景色:JFrame.对象f在main里无法调用背景色前景色都不想显示 一下是书上的一段代码,编译错误,但是可 ...