jquery - jQuery和ajax响应函数

Question

我有这些功能。我的目标是将加载函数与脚本的其余部分分开，因为我想自定义加载消息

function loadContent(url)
{
    $('body').html('Loading');
    content = load(url);
    $('body').html(content);
}

function load(url)
{

    var result = null;
    var scriptUrl = url;
    $.ajax({
        url: scriptUrl,
        type: 'get',
        dataType: 'html',
        async: false,
        success: function(data) {
            result = data;
        } 
    });
    return result;
}

现在，我调用 loadContent 函数：

$(document).ready(function(e) {
    loadContent('index.php');    
});

问题出在这一行：

content = load(url);

因为函数 load() 覆盖了加载消息。

我该如何解决这个问题？多谢你们！

Answer 1

由于您的 ajax 成功需要一些时间来从服务器检索数据，因此您的返回将始终为空，即未定义。所以你需要在 ajax 成功函数中加载内容。

function beforeLoad(){
   $('body').html('Loading');
}

function loadContent(data)
{
    $('body').html(data);
}

function load(url)
{
    var result = null;
    var scriptUrl = url;
    $.ajax({
        url: scriptUrl,
        type: 'get',
        dataType: 'html',
        async: false,
        success: function(data) {
            result = data;
            loadContent(result);

            // You can also set result as html without calling a loadContent

            $('body').html(data);
        } 
    });
}

$(document).ready(function(e) {
    beforeLoad();
    load('index.php');    
});

Answer 2

尝试这个：

function load(url)
{
    return $.ajax({
        url: url,
        type: 'get',
        dataType: 'html',
        async: false
    }).responseText;
}

Answer 3

在 ajax 事件成功返回之前，您不能尝试使用数据。试试这个，看看它是否有帮助。

function loadContent (url) {
    var content = {};
    $('body').ajaxStart(function() {
        $(this).html('Loading');
    }).ajaxSuccess(function() {
        $(this).html(content.key);
    }).ajaxError(function() {
        $(this).html('Error');
    });

    load(url, content);
}

function load(url, content)
{
    var scriptUrl = url;
    $.ajax({
        url: scriptUrl,
        type: 'get',
        dataType: 'html',
        success: function(data) {
            content['key'] = data;
        } 
    });
}