JavaScript 和范围问题答案

【问题标题】：JavaScript and Scope IssueJavaScript 和范围问题
【发布时间】：2016-01-08 01:22:35
【问题描述】：

我在使用 jquery 调用 ajax 请求时遇到问题。我这样做的顺序是：

点击按钮
做 ajax 发布
当 ajax 请求完成时，我调用了一个超出范围的函数。

出于某种原因，并怀疑这与我在点击回调中加载函数超出范围这一事实有关。但我什至也没有看到 console.log 消息。但我确实看到了 ajax 调用。

有什么想法吗？也许我这样做是错误的方式？？？

这是类似于我正在尝试做的原型代码：

$(document).ready(function(){

        $('#button').on('click',function(evt){
            var data = {};

            ajax('index.html', data).done(function(){
                console.log('Fire Please'); // this does not fire after the ajax call!!!
                    load(); // this does not fire after the ajax call!!!

            });
        });

        function load(){
            // do another ajax call and add to the dom
        }

        function ajax(url, data){
            return $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                data: data
            });
        }
});

这是我正在尝试使用的实际代码

$(document).ready(function(){

    // add onclick event to the Add Unit Button
addUnitButt.on('click', function(evt){
    var data = {
        id: id,
        dept_no: dept_no.val(),
        dept: dept.val()
    };

    evt.preventDefault();

    dept.val('');
    dept_no.val('');
    $(this).prop('disabled', true);


    ajax('index.html', data).done(function(){
        load();
    });

});

function load(){
    var data = {
        id: 575
    };

    // show loading
    showLoading();

    // reset the table dom
    $("#listTable").find("tr:gt(0)").remove();

    // do initial load of the list data
    ajax('index.html', data)
    .done(function(units){
        var data = toJSONObject(units);

        for(var x = 0; x < data.length; x++){
            if((x & 1) == 0){
                addRow(data[x], data.length, 'odd');
            }else{
                addRow(data[x], data.length, 'even');
            }
        }

        // hide loading
        hideLoading();
    });
}

// ajax function to call for data
function ajax(url, data){
    return $.ajax({
        type: 'POST',
        data: data,
        dataType: 'json',
        url: url
    });
}

});

提前致谢！

【问题讨论】：

范围很好。 XHR 请求是否显示成功响应？
是的。我可以看到调用通过并返回 200。实际上我可以通过刷新页面看到正在添加的数据，并且记录在那里，但只有在我刷新页面之后。就像刷新dom的load函数没有触发一样。
代码乍一看还不错。我注意到您没有发布任何数据，但您提到数据正在保存，这是您用于测试的确切代码还是变体？（因为变体可能存在问题）
此代码示例很好，如果 ajax 成功如您所说，那么您可以将代码发布到您遇到问题的地方吗？
我正在学习：$.Ajax 不会因为 dataType: 'json' 将响应 (index.html) 评估为 JSON 字符串，这不会失败吗？

标签： javascript ajax button scope click

【解决方案1】：

也许你的 index.html 的代码不是有效的 JSON

【讨论】：

很高兴得到最佳答案?

【解决方案2】：

必须调用.always()。

确保您的服务器响应具有正确的标头，例如 Content-Type。并且响应正文是有效的 JSON。

【讨论】：