Question

我尝试使用ajax调用数据，但我只在第二次点击后获取数据。我已经添加了console.log来实现这一点。

$(document).ready(function(){

    var target = "http://neoldes/cs/Satellite?pagename=SiteEntry_LT_EM/ConsumptionStatistics/ConsumptionPerHour";
    var component;

    $("header.mod_info_top").on("click", function() {
        $(this).siblings(".cs_consumption_hour").empty();
        loadConsPerHour( target ).success(function (data) {
            component = data;
        });
        console.log("component");
        console.log(component);
        $(this).next().append(component);
    });

});

function loadConsPerHour( dir ){
    return $.ajax({
        url: dir,
        data: { "accountNumber": $("#count_id").val(),"addressService": $("#addressService").val(), "department": $("#department").val(), "municipality": $("#municipality").val(), "borderTrade": $("#borderTrade").val() }
    });
}

这是控制台中的重新调整第一次点击：

component
undefined

第二次点击：

component
<div id="component"> ... { more html } ...</div>

提前致谢，如果我可以改进我的代码，请告诉我。

Answer 1

尝试将追加代码移动到成功回调中。

$("header.mod_info_top").on("click", function() {
    $(this).siblings(".cs_consumption_hour").empty();
    loadConsPerHour( target ).success(function (data) {
        component = data;
        console.log("component");
        console.log(component);
        $(this).next().append(component);
    });
});

Answer 2

因为在AJAX完成之前执行了console.log（）函数。完成AJAX后，您将不得不调用console.log（），如下所示：

$(document).ready(function(){

    var target = "http://neoldes/cs/Satellite?pagename=SiteEntry_LT_EM/ConsumptionStatistics/ConsumptionPerHour";
    var component;

    $("header.mod_info_top").on("click", function() {
        var targetElement = $(this);
        $(this).siblings(".cs_consumption_hour").empty();
        loadConsPerHour( target ).success(function (data) {
            component = data;
            console.log("component");
            console.log(component);
            targetElement.next().append(component);
        });
    });

});

function loadConsPerHour( dir ){
    return $.ajax({
        url: dir,
        data: { "accountNumber": $("#count_id").val(),"addressService": $("#addressService").val(), "department": $("#department").val(), "municipality": $("#municipality").val(), "borderTrade": $("#borderTrade").val() }
    });
}

它会记录：

component
<div id="component"> ... { more html } ...</div>

JQuery var在第一次单击时未定义，但在第二次定义后定义

2 个答案: