这里不再解释什么是 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 通过回调函数获取异步数据的更多相关文章

  1. node.js通过回调函数获取异步函数的返回结果

    html文件代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. jQuery ajax() 参数,回调函数,数据类型,发送数据到服务器,高级选项

    $.ajax({ options:/*类型:Object;  可选.AJAX 请求设置.所有选项都是可选的.*/ async:/*类型:Boolean; 默认值: true.默认设置下,所有请求均为异 ...

  3. 使用进程池模拟多进程爬取url获取数据,使用进程绑定的回调函数去处理数据

    1 # 使用requests请求网页,爬取网页的内容 2 3 # 模拟使用进程池模拟多进程爬取网页获取数据,使用进程绑定的回调函数去处理数据 4 5 import requests 6 from mu ...

  4. react生命周期获取异步数据

    当react组件需要获取异步数据的时候,建议在ComponentDidMount周期里执行获取动作, 如果非异步数据,可以在ComponentWillMount获取 因为ComponentWillMo ...

  5. ajax的回调函数和匿名函数

    1.什么是js回调函数 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为函数实际上 ...

  6. ajax的回调函数

    ajax的回调函数(done,fail,always) 观看代码: $.ajax({ type: "post",//请求的类型 url: "/book/detail?ac ...

  7. 解决layui表单ajax提交回调函数不起作用问题的两种方式

    最近想用layui开发一个论坛模板用的是fly-ui,才接触layui对其还不太熟悉.一个简单的登录就困扰了我很久.登录的form通过ajax提交回调函数老是不起作用.经过浪费了N多时间的调试,发现l ...

  8. struts通过Ajax返回数据时,例如对象类型,没有执行Ajax的回调函数

    <result type="json"  name="success">                 <param name=" ...

  9. Ajax异步的回调函数执行了多遍

    问题: 在做下拉滚动加载时(类似于qq空间下拉加载),数据向下滚动一次,就会加载一次,即append一下,跟踪js后,发现回调函数执行了多次,导致append将上次的append结果append上了, ...

随机推荐

  1. How many groups(DP)

    题意: 定义:设M为数组a的子集(元素可以重复),将M中的元素排序,若排序后的相邻两元素相差不超过2,则M为a中的一个块,块的大小为块中的元素个数 给出长度为n的数组a,1<=n<=200 ...

  2. js-xlsx sheet_to_json 读取小数位数变多

    read as string . 例如:2.85 读取后变成 2.84999999999999999 这种. 以字符串形式读取. XLSX.utils.sheet_to_json(workbook.S ...

  3. Selenium:下拉框处理(Select模块)

    在UI自动化测试过程中,经常会遇到一些下拉框,如果我们基于Webdriver操作的话就需要click两次,而且很容易出现问题,实际上Selenium给我们提供了专门的Select(下拉框处理模块). ...

  4. VMware中Centos7的静态ip设置

    网络连接方式:桥接模式.修改后确定.启动centos7,root账户进行登录. 2.修改网卡配置文件 (1) 打开网卡配置文件 vim /etc/sysconfig/network-scripts/i ...

  5. luoguP2184 贪婪大陆 题解(树状数组)

    P2184 贪婪大陆  题目 其实很容易理解就是询问一段区间内有多少段不同的区间 然后再仔细思索一下会发现: 1.只要一个区间的开头在一个节点i的左边,那么这个区间包含在区间1~i中. 2.只要一个区 ...

  6. ubuntu中下载pycharm并添加到桌面

    方法一:下载Pycharm与安装 下载地址:https://www.jetbrains.com/pycharm/ Pycharm专业版和社区版对大多数人来说差别不大,区别如下: 我们下载Linux的社 ...

  7. 推荐系统之隐语义模型LFM

    LFM(latent factor model)隐语义模型,这也是在推荐系统中应用相当普遍的一种模型.那这种模型跟ItemCF或UserCF的不同在于: 对于UserCF,我们可以先计算和目标用户兴趣 ...

  8. python系列——文件操作

    打开和关闭 示例:python系列——文件操作的代码 打开模式 读取 写入

  9. 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 ...

  10. Sql Server Management Studio 18 打开闪退问题

    解决方案 找到MSSMS安装位置,例如我是安装到了D:\Program Files (x86)\Microsoft SQL Server Management Studio 18 将D:\Progra ...