Rumah hujung hadapan web tutorial js 使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码_jquery

使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码_jquery

May 16, 2016 pm 06:13 PM
petunjuk

情景
如何在特定的请求上实现"ajaxStart"的效果?
首先,重写Ajax方法的代价太高,仍然可以利用jQuery自身的Ajax Events
Ajax触发的全局事件会像一个标准事件一样传播到所有DOM节点上。层级:jQuery Events > Ajax Events > 自定义Ajax事件。
实现

复制代码 代码如下:

Wo = window.Wo || {};
Wo.ajax = {
spinner : $([])
,init : function() {
var $spinner = this.spinner = $('#ajax-loading');
var show = function(e) {
if(e.namespace === 'Wo') $spinner.show();
};
var hide = function(e) {
$spinner.hide();
};
$spinner.bind({
'ajaxStart.Wo' : show
,'ajaxStop.Wo' : hide
,'ajaxError.Wo' : hide
});
this.adapt(['getJSON','get','post','ajax']);
}
// 预备发送请求
,_prepare : function() {
this.spinner.trigger('ajaxStart.Wo');
}
// 接口批量变更
,adapt : function(fns) {
var self = this;
$.each(fns,function(i,fn) {
Wo[fn] = function() {
self._prepare();
$[fn].apply(this,arguments);
}
});
}
};

有两种方法可以判断出触发的事件是否为特定的事件:
确定的命名空间。
在触发时传递额外的参数给事件处理程序。
这里用事件的命名空间来进行触发来源的判断。adapt方法相当于适配器的应用,用一套改善的接口替代了另一套接口。
如果要增加load方法,稍微麻烦一点,因为有可能是ajax方法或者元素的onload事件。
要添加一个代理方法,并进行类型判断:
复制代码 代码如下:

var _load = $.fn.load;
$.fn.load = function() {
$.type(arguments[0]) === 'string' && self._prepare();
_load.apply(this,arguments);
return this;
};

使用
所有方法参数仍与原先一致:
复制代码 代码如下:

Wo.post(url, [data,] callback)
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah yang perlu saya lakukan jika Google Chrome menggesa bahawa kandungan tab ini dikongsi? Apakah yang perlu saya lakukan jika Google Chrome menggesa bahawa kandungan tab ini dikongsi? Mar 13, 2024 pm 05:00 PM

Apakah yang perlu saya lakukan jika Google Chrome menggesa bahawa kandungan tab ini dikongsi?

Cuba nada dering dan nada teks baharu: Alami makluman bunyi terkini pada iPhone dalam iOS 17 Cuba nada dering dan nada teks baharu: Alami makluman bunyi terkini pada iPhone dalam iOS 17 Oct 12, 2023 pm 11:41 PM

Cuba nada dering dan nada teks baharu: Alami makluman bunyi terkini pada iPhone dalam iOS 17

Cara mengendalikan gesaan checksum input pengguna dalam Vue Cara mengendalikan gesaan checksum input pengguna dalam Vue Oct 15, 2023 am 10:10 AM

Cara mengendalikan gesaan checksum input pengguna dalam Vue

Apl Baidu Tieba menggesa bahawa operasi itu terlalu kerap, apa masalahnya? Apl Baidu Tieba menggesa bahawa operasi itu terlalu kerap, apa masalahnya? Apr 01, 2024 pm 05:06 PM

Apl Baidu Tieba menggesa bahawa operasi itu terlalu kerap, apa masalahnya?

Apakah yang perlu saya lakukan jika ia mengatakan bahawa pemandu monitor telah berhenti bertindak balas dan telah dipulihkan? Apakah yang perlu saya lakukan jika ia mengatakan bahawa pemandu monitor telah berhenti bertindak balas dan telah dipulihkan? Mar 14, 2024 pm 02:00 PM

Apakah yang perlu saya lakukan jika ia mengatakan bahawa pemandu monitor telah berhenti bertindak balas dan telah dipulihkan?

Apakah yang perlu saya lakukan jika pencetak kongsi menggesa 0000709? Apakah yang perlu saya lakukan jika pencetak kongsi menggesa 0000709? Feb 21, 2024 pm 08:42 PM

Apakah yang perlu saya lakukan jika pencetak kongsi menggesa 0000709?

Bagaimana untuk melumpuhkan pengalaman web yang diperibadikan dalam Edge Tips Microsoft Bagaimana untuk melumpuhkan pengalaman web yang diperibadikan dalam Edge Tips Microsoft Jul 13, 2023 pm 12:50 PM

Bagaimana untuk melumpuhkan pengalaman web yang diperibadikan dalam Edge Tips Microsoft

Sembang Bing di web kini menyokong input suara Sembang Bing di web kini menyokong input suara Jun 15, 2023 pm 02:32 PM

Sembang Bing di web kini menyokong input suara

See all articles