这里有一个小型jQuery插件的代码片段
(点击此处),它为一组jQuery元素添加了一个loadThen函数。它基本上是没有回调的load()函数,并返回一个promise,只有在内容加载并插入到所选元素集后才会被解决。
它基本上是jQuery自己的load()代码的复制/粘贴,除了它返回实际ajax调用的promise。这使您可以在ajax失败时获得拒绝的promise。
由于它基于load()功能,因此您可以在url后面添加一个选择器,以空格分隔,仅获取已加载html的一部分。
示例1:将此站点的主页加载到id =“container”的元素中。
$('#container').loadThen('/').then(function () {
}, function () {
});
示例二:将主页的标题加载到此页面的标题中。
$('h1').eq(0).loadThen('/ h1').then(function () {
}, function () {
});
要点内容:
(function ($) {
var _loadThen = $.fn.loadThen;
$.fn.loadThen = function (url, params) {
if (typeof url !== "string" && _loadThen) {
return _loadThen.apply(this, arguments);
}
if(this.length <= 0) {
return jQuery.Deferred().resolveWith(this, ['']);
}
var selector, type, response,
self = this,
off = url.indexOf(" ");
if (off >= 0) {
selector = jQuery.trim(url.slice(off));
url = url.slice(0, off);
}
if (params && typeof params === "object") {
type = "POST";
}
return jQuery.ajax({
url: url,
type: type,
dataType: "html",
data: params
}).then(function (responseText) {
self.html(selector ? jQuery("<div>").append(jQuery.parseHTML(responseText)).find(selector) : responseText);
return self;
});
};
}(jQuery));
<div id="c"> <div id="part1"/> <div id="part2"/> ... </div>
- Alnitak