重构嵌套的ajax调用,以便变量起作用

时间:2013-08-05 20:04:37

标签: ajax variables inheritance nested

下面的“值”变量不会被继承到第二个调用中。重建这个有用的推荐方法是什么?

首先,我从数据表中获取所有数据。然后,我需要从完全不同的数据库(更改控件)获得挂起的更改。我需要显示第二个数据(如果存在)。

function getData(appid) {
  $.ajax({
    url: 'services/getData',
    type: 'GET',
    data: { 'appid': appid },
    dataType: 'json',
    success: function (data) {
        var field1Value = data.field1;
        var field2Value = data.field2;
        var field3Value = data.field3;

        //get pending changes
        $.ajax({
            url: 'services/getPendingChanges',
            type: 'GET',
            data: { 'appid': appid },
            dataType: 'json',
            success: function (data2) {
                if (data2.field1 <> '') { field1value = data2.field1 };
                if (data2.field2 <> '') { field1value = data2.field2 };
                if (data2.field2 <> '') { field1value = data2.field2 };
            },
            complete: function () {
                //set data in UI regardless of whether it came from getData or getPendingChanges
                $('#txtField1').html(field1value);
                $('#txtField2').html(field2value);
                $('#txtField3').html(field3value);
            }
        })
    }
  })
}

当然,当我这样做时,所有“*值”变量都是未定义的。

2 个答案:

答案 0 :(得分:0)

不确定这是否会对你有帮助(也可能不会),但这是我在Javascript中学到的东西。但是javascript中的匿名类的性质是这样你可以使用它们而不用担心可变冲突。最简单的方法是汇集更高范围的变量以便稍后使用。但这通常是不好的做法......所以你可以把所有的东西都包起来......

答案 1 :(得分:0)

我最后隐藏了这些字段,然后从第一个字段开始调用第二个ajax。我在第一次调用成功时设置字段,在第二次调用成功时设置字段,如果存在。然后我在第二个完整的时候取消隐藏它们。

function getData(appid) {
  $('#txtField1').hide();
  $('#txtField2').hide();
  $('#txtField3').hide();
  $.ajax({
    url: 'services/getData',
    type: 'GET',
    data: { 'appid': appid },
    dataType: 'json',
    success: function (data) {
        var field1Value = data.field1;
        var field2Value = data.field2;
        var field3Value = data.field3;
        $('#txtField1').html(field1value);
        $('#txtField2').html(field2value);
        $('#txtField3').html(field3value);
    },
    complete: function () {
        //get pending changes
        $.ajax({
            url: 'services/getPendingChanges',
            type: 'GET',
            data: { 'appid': appid },
            dataType: 'json',
            success: function (data2) {
                if (data2.field1 <> '') { 
                    field1value = data2.field1 
                    $('#txtField1').html(field1value);
                };
                if (data2.field2 <> '') { 
                    field2value = data2.field2 
                    $('#txtField2').html(field2value);
                };
                if (data2.field3 <> '') { 
                    field3value = data2.field3 
                    $('#txtField3').html(field3value);
                };
            },
            complete: function () {
                $('#txtField1').show();
                $('#txtField2').show();
                $('#txtField3').show();
            }
        })
    }
  })
}

最终不是隐藏它们而是将它们与装载指示器交换出来。此外,我意识到最好的办法是拥有一个单一的Web服务,它可以在后台完成所有逻辑并返回相应的数据。