首页
学习
活动
专区
圈层
工具
发布

不使用回调函数的ajax请求实现(async和await简化回调函数嵌套)

先把上面用JavaScript实现的多层嵌套回调用同步的方式来改写, 代码如下 代码由ajax和run这两个函数组成, ajax是对jquery ajax的封装,使之能不使用回调函数就能获得ajax的响应结果...当函数被声明为async类型时,如果这个函数要有返回值 ,并且返回值要在某个回调函数中获得,那么这个函数的返回结果就只能是一个 Promise对象,就像示例的ajax函数一样,返回值如果是其它类型那就达不到期望的效果...将值传出去为什么要通过这两个参数呢?因为没辙啊, 试想一下,ajax的回调函数中使用return语句, 意义何在?因此也只能变向的通过Promise将返回值扔给外部的调用者。...所以,使用async和await的第一个要点就是 当函数要获得异步结果时,可以函数声明为async类型, 函数的返回值设为Promise类型对象,而Promise中的resolve和reject是用来向...所以, 第二个要点就是 await就是用来等待Promise对象中resolve和reject这两个函数的执行的,并且将这两个函数传递的参数当作返回结果赋给变量,如同run函数中的代码示例那样。

3.7K50

jQuery 教程

如:$('li.odd') :first 选取第一个元素,如:$('li:first') :gt(n) 选取结果集中索引大于n的元素,n可以为负值,如:$(':gt(3)') :lt(n) 选取结果集中索引小于...下面的例子演示如何获得链接中 href 属性的值: 和 url)一起发送数据。 “demo_test_post.php” 中的 PHP 脚本读取这些参数,对它们进行处理,然后返回结果。 第三个参数是回调函数。...XML文档 $.makeArray() 将一个类似数组的对象转换为真正的数组对象 $.map() 指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回 $.merge() 合并两个数组内容到第一个数组...jQuery animate() – 使用相关值 演示如何在 jQuery animate() 方法中使用相关值。

21K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    向php提交数据及json

    获取上传数据可以通过超全局数组:   如果上面的提交方式是:POST,则用 $_POST   如果上面的提交方式是:GET,则用 $_GET 如:用POST方式提交,在接收该表单的php文件, $username...js提交数据的ajax那儿的是数据,一般用于返回处理某件事的结果(如:向数据库插入数据后,将结果返回,然后通过js或jquery对html上的DOM结构进行操作);注:不能跳转到该文件,(若跳转,则该文件中接收不到数据...) 使用ajax的get,在php 中 echo 的东西会返回一个html页面直接在当前输出,可以用js直接跳转到当前php文件。...大部分计算机都支持json数据类型,json也算比较简单 易被理解,所以被广泛应用 JSON的具体形式:   1、对象是一个无序的“‘名称/值’对”集合。一个对象以“{”开始,以“}”结束。...每个“名称”后跟一个“:”,“‘名称/值’对”之间使用“,”分隔。   2、数组是值(value)的有序集合。一个数组以“[”开始,“]”结束。值之间使用“,”分隔。

    3.1K30

    Yii使用技巧大汇总

    在日志的bind的参数后边跟数的值 如何在页面底部显示所有的db相关的日志 同上,配置log组件的routes中加入 ?...errorHandler->error 获得错误信息 把字符串分解成数组,并去掉空值 复制代码 代码如下: preg_split('/s*,s*/','this , is , , a test',-1...app()->theme->name; themes文件夹和protected是同级的,其下边某个theme的目录结果同protected/views下一样 关于skin 用theme改变view的外观...每一行代表一个数据项,一列通常代表数据项的一个属性 CGridView支持排序和分页,可以用ajax或普通的方式 CgridView必序和data provider一起使用 最简单的用法 ?...> create,update最好是分开放在两个action中,共用一个form,中间可以加一层view,以在头尾显示不同的东西 成段的完成一个功能的代码尽量拿出来放到一个方法中 ?

    3.3K31

    JQuery 入门学习(三)

    如果只是基础,我们这样理解ajax好了:利用ajax可以动态地以javascript的方式向服务器请求数据,并接受服务器发回的数据,这个过程浏览器可以做其他的任何工作,可以不离开页面,不刷新。    ...但是运用ajax,用户点击链接后,不打开新页面,而由javascript在后台向服务器获取结果,然后用一个提示框弹出提示用户,用户在这个过程中还可以继续填写表单,两个过程互不影响。...首先选择器选择了id=name的文本框,用val()方法获取其值,并赋值给name变量。     看后面,用到了get方法。...ajax的json方法     Jquery中从服务器加载json数据的方法是:$.getJSON     它的参数与get()方法完全一样,但是服务器返回结果data应该是一个json格式的字符串...在php5.2以上的版本,有了一对函数json_encode()和json_decode(),分别对php中对象进行json格式的编码和解码。     举个没什么营养的例子。

    9.8K20

    PHP的文件上传操作

    HTML5学堂:关于文件上传,主要包括“构建基本表单”-“使用AJAX发送请求,上传文件”-“使用PHP获取文件基本信息”-“执行SQL语言,返回基本图片路径”-“使用DOM操作设置预览图路径”。...上图为上传文件后 核心知识 - 文件上传操作的基本步骤 1、构建基本的表单,并针对表单进行相关处理 2、在“上传文件”数据发生变化的时候,使用AJAX发送请求 3、PHP获得到文件的基本信息 4、PHP...第二个知识点,在于此处需要使用jquery.form.js插件辅助完成AJAX对数据的提交——ajaxSubmit方法。 PHP获得到文件的基本信息 如:"h5course/data.jpg"; PHP执行SQL,将获取的基本信息存入数据库 具体代码如下: // 插入数据库 mysql_query("INSERT INTO images(fileUrl...) VALUES('$fileUrl')" PHP返回基本的图片路径 将获取到的地址进行JSON编码,并使用echo语句将结果输出出来。

    6.2K50

    Web前端学习笔记之前端跨域知识总结

    第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。不同的框架之间是可以获取window对象的,但却无法获取相应的属性和方法。...所以我们可以通过script标签引入一个js或者是一个其他后缀形式(如php,jsp等)的文件,此文件返回一个js函数的调用。...比如,有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是http://damonare.cn/data.php,那么a.html中的代码就可以这样...中的问号,之后获取到数据后又会自动销毁,实际上就是起一个临时代理函数的作用。...$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。

    1.5K30

    前端架构师之01_JQuery

    元素 :even 获取索引为偶数的指定选择器中的奇数行数据,索引默认从0开始 $("li :even")获取所有li元素中,索引为偶数的奇数行数据,如索引为0,2,4的第1个、第3个和第5个元素 :odd 获取索引为奇数的指定选择器中的偶数行数据,索引默认从0开始 $("li :odd")获取所有元素中,索引为奇数的偶数行数据,如索引为1,3,5的第2个、第4个和第6个元素...=current]")获取class不等于current的所有元素 [attr^=value] 获取属性值以value开始的元素 $("div[class^=box]")获取class属性值以...box开始的所有元素 [attr$=value] 获取属性值以value结尾的元素 $("div[class$=er]")获取class属性值以er结尾的所有元素 [attr*=value...[attrN] 获取同时拥有多个属性的元素 $("input[id][name$='usr']")获取同时含有id属性和属性值以usr结尾的name属性的元素 2.2.7 子元素选择器

    3.1K00

    第三方登录(3)---微博登录

    完善应用信息,可以看到我们已经成功获得App Key和App secret两个秘钥了。这个界面正常填写信息就可以,但是微博申请应用需要提供一个网站主页地址,里面需要包含微博组件。...我们现在来讲讲如何在你界面引入一个微博组件,我这里以关注组件为例: ?...现在前端发起ajax请求这个后端接口,将code值传给后端,获取到access_token. ?...前端在第一步获取到code之后,发起ajax请求后端获取access_token,并且打印access_token的值,我们在浏览器端测试看看是否有效果。 ?...可以看到我们成功获取到用户个人信息,最后前端发起ajax请求调用后端的获取用户信息接口。 ? 我们发起ajax请求后端获取用户数据的接口,然后获取到用户数据后直接在界面显示出来。

    5.9K31

    JS 跨域问题常见的五种解决方式

    使用方法也很简单,在php后端设置 Access-Control-Allow-Origin 头即可,如: 值) 其实还有一种很常见的方式就是使用 $.getJson获取,直接给出一个网址 把$.ajax部分替换成...$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。...第三: document.domain + iframe (iframe的使用主要是为了ajax通信) 不同的框架之间是可以获取window对象的,但却无法获取相应的属性和方法。...http://example.com/b.html 原理就是让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面,所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的

    2.2K00

    初学者必看Ajax的总结

    2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。 4:响应已完成;您可以获取并使用服务器的响应了。...在项目中需要传递一些参数给服务器中的页面,那么可以使用$.get()和$.post()或$.ajax()方法 注意:$.get()和$.post()方法是 jquery 中的全局函数 $.get()方法...方式请求的数据会被浏览器缓存起来,因此其他人可以从浏览器的历史纪录中读取这些数据,如:账号、密码。...在 PHP 中,GET 方式用$_GET[]获取;POST 方式用$_POST[]获取;两种方式都可用$_REQUEST[]来获取 总结 使用load() 、$.get()和$.post()方法完成了一些常规的...不会自动缓存结果,除非设置 cache 参数。

    3.7K40

    js中几种实用的跨域方法原理详解

    比如,有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是http://example.com/data.php,那么a.html中的代码就可以这样...最终那个页面输出的结果是: ? 所以通过http://example.com/data.php?...$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。...的方法,让我们能通过js完全控制这个iframe,这样我们就可以让iframe去发送ajax请求,然后收到的数据我们也可以获得了。...a.html页面载入后3秒,跳转到了b.html页面,结果为: ? 我们看到在b.html页面上成功获取到了它的上一个页面a.html给window.name设置的值。

    2.6K80

    js中几种实用的跨域方法原理详解

    比如,有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是http://example.com/data.php,那么a.html中的代码就可以这样...因为是当做一个js文件来引入的,所以http://example.com/data.php返回的必须是一个能执行的js文件,所以这个页面的php代码可能是这样的: ? 最终那个页面输出的结果是: ?...$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。...的方法,让我们能通过js完全控制这个iframe,这样我们就可以让iframe去发送ajax请求,然后收到的数据我们也可以获得了。...a.html页面载入后3秒,跳转到了b.html页面,结果为: ? 我们看到在b.html页面上成功获取到了它的上一个页面a.html给window.name设置的值。

    2.2K10

    WordPress二次开发之调用ajax

    以字体样式插件为例,当用户输入字体颜色值时异步判断值类型是否合法 引入JS 通过wp_enqueue_script方法引入 wp_enqueue_script( $handle, $src, $deps...默认值:None $src:(可选)WordPress网站根目录下的JS路径。如:”/wp-includes/js/xxx.js”。...$in_footer:(可选)默认值:false,放置在区块中。为true时,会出现在区最下方,但必须有wp_footer()钩子。...请求 这里我们不能之间在admin-ajax.php中对ajax进行处理,这样做就是修改了核心文件 观察 admin-ajax.php 发现其挂载了两个钩子wp_ajax_...和wp_ajax_nopriv...我们在初始化的时候将函数添加到这两个钩子上即可在插件中对ajax请求进行处理 在构造函数中 public function __construct() { add_action(

    1.3K10

    Web基础知识

    当服务器响应后,再来处理Ajax对象获取到的响应结果。 同步方式:是阻塞的,当Ajax对象向Web服务器发送请求后,会等待Web服务器响应的数据接收完成,再继续执行后面的代码。...3.4 处理服务器返回的信息 获取Ajax的当前状态:readyState属性 readyState属性用于获取Ajax的当前状态,状态值有5种形式。...另外还有一个类似的属性statusText,值为字符型数据,包含了描述短语,如“200 OK”。...为了解决这两个问题,我们可以编写代码实现自动生成一个随机的回调函数名,并在请求时将函数名传递给服务器,服务器在返回结果中调用指定的函数。...6.2 FormData Ajax向服务器发送数据时,如何收集表单中的数据? 以前的方法:通过DOM操作手动获取用户在表单中填写的值。

    1.9K10

    详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()

    你甚至可以通过制定ID来实现载入部分内容的Ajax操作,如: $('#ajax-div').load('data.html#my-section'); 实现GET和POST方法 get( url,...不会自动缓存结果。 “json”: 返回 JSON 数据 。 “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时, 如 “myurl?callback=?”...在单个AJAX请求时,你可以将global的值设为false,以将此请求独立于AJAX的全局事件。...,   type: "POST" }); 一些你不得不知道的方法 写AJAX肯定离不开从页面获取相应的值。...在这里简单列举一些方法: val() val()函数可以返回表单组建的值,例如任何种类input的值。配合选择符操作,你可以轻易获取选项组、输入框、按钮等元素的值。

    5.3K100
    领券