ajax 通过回调函数获取异步数据
这里不再解释什么是 ajax,以及什么是异步的问题。
我们直接来问题,这里采用 jQuery 的 ajax 方法来获取数据。
先来看代码:
$(function () {
let db = '';
$.ajax({
url: 'http://api.douban.com/v2/movie/top250', // 豆瓣 api
async: true, // 异步获取数据
dataType: 'jsonp', // 豆瓣限制,必须采用跨域的方式获取数据
success(result) {
db = result;
},
error(err) {
console.log(err);
}
})
console.log(db);
})
来解释一下,我们首先定义一个变量 db,然后通过 ajax 异步的获取数据,最后打印出来。
而此时,打印结果为空
原因正是因为异步,当异步执行时,此时为非阻塞式,即,代码继续向下执行,所以,此时 db 仍是开始时,我们默认定义的空值。
那么,如何才能在这种情况下获取到 ajax 成功获取的数据呢,我们可以采用回调函数的方法来解决这个问题。
代码如下:
$(function () {
let db = ''; (function () { // 定义一个匿名自执行函数
getInfo(function () { // 执行 getInfo 函数,并将一个匿名函数当做参数传递过去
console.log(db);
})
})() function getInfo(callback) {
$.ajax({
url: 'http://api.douban.com/v2/movie/top250',
async: true,
dataType: 'jsonp',
success(result) {
db = result;
callback(db); // 执行传递过来的匿名函数
},
error(err) {
console.log(err);
}
})
}
})
通过这种方式,我们就可以解决异步数据的获取问题。
ajax 通过回调函数获取异步数据的更多相关文章
- node.js通过回调函数获取异步函数的返回结果
html文件代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jQuery ajax() 参数,回调函数,数据类型,发送数据到服务器,高级选项
$.ajax({ options:/*类型:Object; 可选.AJAX 请求设置.所有选项都是可选的.*/ async:/*类型:Boolean; 默认值: true.默认设置下,所有请求均为异 ...
- 使用进程池模拟多进程爬取url获取数据,使用进程绑定的回调函数去处理数据
1 # 使用requests请求网页,爬取网页的内容 2 3 # 模拟使用进程池模拟多进程爬取网页获取数据,使用进程绑定的回调函数去处理数据 4 5 import requests 6 from mu ...
- react生命周期获取异步数据
当react组件需要获取异步数据的时候,建议在ComponentDidMount周期里执行获取动作, 如果非异步数据,可以在ComponentWillMount获取 因为ComponentWillMo ...
- ajax的回调函数和匿名函数
1.什么是js回调函数 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为函数实际上 ...
- ajax的回调函数
ajax的回调函数(done,fail,always) 观看代码: $.ajax({ type: "post",//请求的类型 url: "/book/detail?ac ...
- 解决layui表单ajax提交回调函数不起作用问题的两种方式
最近想用layui开发一个论坛模板用的是fly-ui,才接触layui对其还不太熟悉.一个简单的登录就困扰了我很久.登录的form通过ajax提交回调函数老是不起作用.经过浪费了N多时间的调试,发现l ...
- struts通过Ajax返回数据时,例如对象类型,没有执行Ajax的回调函数
<result type="json" name="success"> <param name=" ...
- Ajax异步的回调函数执行了多遍
问题: 在做下拉滚动加载时(类似于qq空间下拉加载),数据向下滚动一次,就会加载一次,即append一下,跟踪js后,发现回调函数执行了多次,导致append将上次的append结果append上了, ...
随机推荐
- How many groups(DP)
题意: 定义:设M为数组a的子集(元素可以重复),将M中的元素排序,若排序后的相邻两元素相差不超过2,则M为a中的一个块,块的大小为块中的元素个数 给出长度为n的数组a,1<=n<=200 ...
- js-xlsx sheet_to_json 读取小数位数变多
read as string . 例如:2.85 读取后变成 2.84999999999999999 这种. 以字符串形式读取. XLSX.utils.sheet_to_json(workbook.S ...
- Selenium:下拉框处理(Select模块)
在UI自动化测试过程中,经常会遇到一些下拉框,如果我们基于Webdriver操作的话就需要click两次,而且很容易出现问题,实际上Selenium给我们提供了专门的Select(下拉框处理模块). ...
- VMware中Centos7的静态ip设置
网络连接方式:桥接模式.修改后确定.启动centos7,root账户进行登录. 2.修改网卡配置文件 (1) 打开网卡配置文件 vim /etc/sysconfig/network-scripts/i ...
- luoguP2184 贪婪大陆 题解(树状数组)
P2184 贪婪大陆 题目 其实很容易理解就是询问一段区间内有多少段不同的区间 然后再仔细思索一下会发现: 1.只要一个区间的开头在一个节点i的左边,那么这个区间包含在区间1~i中. 2.只要一个区 ...
- ubuntu中下载pycharm并添加到桌面
方法一:下载Pycharm与安装 下载地址:https://www.jetbrains.com/pycharm/ Pycharm专业版和社区版对大多数人来说差别不大,区别如下: 我们下载Linux的社 ...
- 推荐系统之隐语义模型LFM
LFM(latent factor model)隐语义模型,这也是在推荐系统中应用相当普遍的一种模型.那这种模型跟ItemCF或UserCF的不同在于: 对于UserCF,我们可以先计算和目标用户兴趣 ...
- python系列——文件操作
打开和关闭 示例:python系列——文件操作的代码 打开模式 读取 写入
- LeetCode Array Easy 414. Third Maximum Number
Description Given a non-empty array of integers, return the third maximum number in this array. If i ...
- Sql Server Management Studio 18 打开闪退问题
解决方案 找到MSSMS安装位置,例如我是安装到了D:\Program Files (x86)\Microsoft SQL Server Management Studio 18 将D:\Progra ...