[英]Javascript callback from custom jQuery AJAX function
我有这个jQuery代码
(function () {
function load_page (pagename) {
$.ajax({
url: "/backend/index.php/frontend/pull_page/",
type: "POST",
data: {page: pagename},
success: function (json) {
var parsed = $.parseJSON(json);
console.log(parsed);
return parsed;
},
error: function (error) {
$('#content').html('Sorry, there was an error: <br>' + error);
return false;
}
});
}
...
var json = load_page(page);
console.log(json);
if (json == false) {
$('body').fadeIn();
} else {
document.title = json.pagename + ' | The Other Half | freddum.com';
$("#content").html(json.content);
$('#header-navigation-ul a:Contains('+page+')').addClass('nav-selected');
$('body').fadeIn();
}
})();
而且,猜怎么着,它不起作用。 AJAX请求触发正常,服务器返回有效的JSON,但console.log(json);
返回undefined
,并且js到达json.pagename
时崩溃。 第一个console.log(parsed)
所以它只是一个问题也返回好的数据return
(我认为)。
我知道我正在抓着稻草,如果这行得通,那将是极度的,但事实并非如此。 老实说,我不知道如何为这种情况编写回调函数。
编辑 :这是我现在更新的代码,也不起作用。
function load_page (pagename, callback) {
$.ajax({
url: "/backend/index.php/frontend/pull_page/",
type: "POST",
data: {page: pagename},
success: function (json) {
callback(json);
},
error: function (error) {
$('#content').html('Sorry, there was an error: <br>' + error);
var json = false;
callback(json);
}
});
}
(function () {
$('body').hide();
var page = window.location.hash.slice(1);
if (page == "") page = 'home';
load_page(page, function(json) {
var parsed = $.parseJSON(json);
console.log(parsed);
if (json.pagename == "" || json.pagename == null) {
document.title = 'Page Not Found | The Other Half | freddum.com';
$('body').fadeIn();
} else {
document.title = parsed.pagename + ' | The Other Half | freddum.com';
$("#content").html(parsed.content);
$('#header-navigation-ul a:Contains('+page+')').addClass('nav-selected');
$('body').fadeIn();
}
});
})();
我将load_page
移到了全局命名空间'cos中,我需要它在那儿。 console.log(parsed)
返回似乎是有效的json对象,但console.log(parsed.content)
产生undefined
。 #content
也未设置。 有任何想法吗? 我很乐意做任何测试。
任何帮助是极大的赞赏!
由于Ajax请求是异步的 ,因此无论请求是否完成, $.ajax
函数调用之后的代码仍将执行,因此您应该接受回调作为load_page
的参数,该请求在请求完成时被调用:
function load_page (pagename, callback) {
$.ajax({
url: "/backend/index.php/frontend/pull_page/",
type: "POST",
data: {page: pagename},
success: function (json) {
var parsed = $.parseJSON(json);
console.log(parsed);
callback(parsed); //bingo
},
error: function (error) {
$('#content').html('Sorry, there was an error: <br>' + error);
}
});
}
load_page(page, function(json) {
console.log(json);
if (json == false) {
$('body').fadeIn();
} else {
document.title = json.pagename + ' | The Other Half | freddum.com';
$("#content").html(json.content);
$('#header-navigation-ul a:Contains('+page+')').addClass('nav-selected');
$('body').fadeIn();
}
});
在load_page函数的定义内,没有“ return”语句,至少不是直接这样做,因此至少要执行var json = load_page(page);
您最终会得到json = undefined。 理想情况下,您应该稍微重新组织代码。 这样做的方法不止一种,但这里有一种:
(function () {
function mySuccess(json) {
var parsed = $.parseJSON(json);
console.log(json);
console.log(parsed);
document.title = parsed.pagename + " | The Other Half | freddum.com";
$("#content").html(parsed.content);
$("#header-navigation-ul a:Contains(" + page + ")").addClass("nav-selected");
$("body").fadeIn();
}
function myFailure(error) {
$('#content').html('Sorry, there was an error: <br>' + error);
$("body").fadeIn();
}
function load_page(pagename, onSuccess, onFailure) {
$.ajax({
url: "/backend/index.php/frontend/pull_page/",
type: "POST",
data: {
page: pagename
},
success: onSuccess,
error: onFailure
});
}
load_page(page, mySuccess, myFailure);
})();
问题是因为jQuery默认情况下异步发出ajax调用。 因此,即使在ajax调用完成之后也要执行下一条语句
var json = load_page(page);。 您可以通过在config参数中传递async:false并在回调函数中处理retun值来使调用同步。
在解析之前尝试console.log来检查确切的数据。 它是有效的json吗
成功:函数(json){console.log(json); var parsed = $ .parseJSON(json);
这是一个AJAX调用,例如,代码是异步完成的。 您需要将console.log以及json变量的任何其他用法放入成功函数中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.