首页 > web前端 > js教程 > 妙味课堂JS高级专题篇视频资料分享

妙味课堂JS高级专题篇视频资料分享

巴扎黑
发布: 2017-08-28 15:52:00
原创
1926 人浏览过

《妙味课堂JS高级专题篇视频教程》将向大家详细介绍javascript,javascript是一种直译式脚本语言,也是一种广泛用于客户端Web开发的脚本语言。目前,被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。

58a7b627db74d819.jpg

视频播放地址:http://www.php.cn/course/241.html

本视频难点在于封装自己的JS库:

1.需求背景
很多时候,我们使用jquery.ajax的方式向后台发送请求,型如      

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

$.ajax({

        type: "post",

        url: "/User/Edit",

        data: { data: JSON.stringify(postdata) },

        success: function (data, status) {

          if (status == "success") {

            toastr.success('提交数据成功');

            $("#tb_aaa").bootstrapTable('refresh');

          }

        },

        error: function (e) {

        },

        complete: function () {

        }

  

      });

登录后复制

这种代码太常见了,这个时候我们有这样一个需求:在自己调用ajax请求的时候,我们不想每次都写error:function(e){}这种代码,但是我们又想让它每次都将ajax的错误信息输出到浏览器让用户能够看到。怎么办呢?

2、实现原理
要想实现以上效果其实并不难,我们可以将$.ajax({})封装一层,在封装的公共方法里面定义error对应的事件即可。确实,这样能达到我们的要求,但是并不完美,原因很简单:1)在jquery的基础上面再封装一层,效率不够高;2)需要改变调用者的习惯,每次调用ajax的时候需要按照我们定义的方法的规则来写,而不能直接用原生的$.ajax({})这种写法,这是我们不太想看到。

既然如此,那我们如何做到既不封装控件,又能达到以上要求呢?答案就是通过我们的$.extend去扩展原生的jquery.ajax。

其实实现起来也并不难,通过以下一段代码就能达到我们的要求。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

(function ($) {

  //1.得到$.ajax的对象

  var _ajax = $.ajax;

  $.ajax = function (options) {

    //2.每次调用发送ajax请求的时候定义默认的error处理方法

    var fn = {

      error: function (XMLHttpRequest, textStatus, errorThrown) {

        toastr.error(XMLHttpRequest.responseText, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });

      },

      success: function (data, textStatus) { },

      beforeSend: function (XHR) { },

      complete: function (XHR, TS) { }

    }

    //3.如果在调用的时候写了error的处理方法,就不用默认的

    if (options.error) {

      fn.error = options.error;

    }

    if (options.success) {

      fn.success = options.success;

    }

    if (options.beforeSend) {

      fn.beforeSend = options.beforeSend;

    }

    if (options.complete) {

      fn.complete = options.complete;

    }

    //4.扩展原生的$.ajax方法,返回最新的参数

    var _options = $.extend(options, {

      error: function (XMLHttpRequest, textStatus, errorThrown) {

        fn.error(XMLHttpRequest, textStatus, errorThrown);

      },

      success: function (data, textStatus) {

        fn.success(data, textStatus);

      },

      beforeSend: function (XHR) {

        fn.beforeSend(XHR);

      },

      complete: function (XHR, TS) {

        fn.complete(XHR, TS);

      }

    });

    //5.将最新的参数传回ajax对象

    _ajax(_options);

  };

})(jQuery);

登录后复制

如果没接触过jquery里面$.extend这个方法的童鞋可能看不懂以上是什么意思。好,我们首先来看看jquery API对$.extend()方法是作何解释的。

以上是妙味课堂JS高级专题篇视频资料分享的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板