[英]jQuery AJAX call initiates without command when .done function added
[英]jQuery When Done on dynamically pulled function call
我有以下代码:
在site-code.js中
....
var ajaxContentFunc = $(origin).data("modal-content-handler");
$.when(window[ajaxContentFunc]()).done(function (resp) {
kModal.showContent(resp);
});
在另一个文件中,我具有以下标记和功能
<a href="#" data-modal-content-handler="ajaxContentGeneration">Click Me</a>
....
function ajaxContentGeneration() {
var aProm = $.ajax({
url: "tests/ajax/AjaxTest.aspx",
data: { exampleType: "modal-ajax" },
dataType: "html"
});
aProm.done(function (data) {
console.log("Ajax Loaded!");
var content = $(data).find("#ajax-content");
return aProm;
});
}
我需要将ajaxContentGeneration(可能的方法)的结果填充到变量中,以发送到showContent或换句话说:
1)从标记的modal-content-handler数据属性中提取ajaxContentFunction Name
2)调用函数(在这种情况下为ajaxContentGeneration)
3)等待函数的ajax完成并返回生成的数据(在这种情况下为html)
4)完成后,将该值传递给kModal.showContent(---- Here ----);
但是目前我得到:
1)正确拉ajaxContentFunctionName
2)调用函数(ajaxContentGeneration()函数)
3)调用kModal.showContent(undefined)。 这被过早调用是因为deferred没有正确地等待函数调用完成(在ajax完成之后)。
4)Ajax完成
我在哪里弄糟?
据我所知,您在那里95%。
使用.then()
而不是.done()
并返回$.ajax().then()
返回的promise:
function ajaxContentGeneration() {
return $.ajax({
url: "tests/ajax/AjaxTest.aspx",
data: { exampleType: "modal-ajax" },
dataType: "html"
}).then(function (data) {
return $(data).find("#ajax-content"); // this will return jQuery
// return $(data).find("#ajax-content").html(); // this will return html
});
}
您可能还可以从顶级调用中清除$.when()
:
var ajaxContentFunc = $(origin).data("modal-content-handler");
window[ajaxContentFunc]().then(function (resp) {
// `resp` is whatever was returned by the `return $(data).find()...` statement above
kModal.showContent(resp);
});
我说的原因“可能”是$.when()
是必要的,如果返回值的(不承诺返流)功能可以替代称为ajaxContentGeneration()
另一种方法是:
// should really be renamed...
function ajaxContentGeneration(){
return $.ajax({
url : "tests/ajax/AjaxTest.aspx",
data : { exampleType: "modal-ajax" },
dataType : "html"
})
}
var ajaxContentFunc = $(origin).data("modal-content-handler");
window[ajaxContentFunc]()
.done(function(RES){
kModal.showContent( $(RES).find("#ajax-content") );
});
因此, ajaxContentGeneration
函数的功能将是返回一个AJAX ajaxContentGeneration
,而不是在其内部进行操作,而是在需要的地方进行操作( 从响应中获取#ajax-content
元素 )
请注意,整个过程都是对JS设计的不好实践,您应该避免在window
对象的顶部使用函数,而应在另一个对象上使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.