从$getJSON加载下拉值

loading dropdown value from $getJSON

本文关键字：加载 getJSON      更新时间：2023-09-26

我有一个带有下拉列表的表单，页面使用Knockout JS将数据绑定到html元素。我有下面的代码来预填充数据库中的值。

JS-

    self.Irr = ko.observableArray([]);
    self.Crp = ko.observableArray([]);
    self.Incr = ko.observableArray([]);
    self.Brnd = ko.observableArray([]);
    self.Sec4 = ko.observableArray([]);
    $.getJSON("GetIrr", null, function (data) { self.Irr(data); })
        .done(function () {
            $.getJSON("GetCrp", null, function (data) { self.Crp(data); });
        })
        .done(function () {
            $.getJSON("GetTill", null, function (data) { self.Sec4(data); });
        })
        .done(function () {
            $.getJSON("GetBrnd", null, function (data) { self.Brnd(data); });
        })
        .done(function () {
            $.getJSON("GetIncr", null, function (data) { self.Incr(data); });
        })
        .done((function () {
            var request = $.ajax({
                type: "POST",
                dataType: 'json',
                url: "UserSavedData",
                data: { "InfoVal": $("#infoID").val() }
            });

            request.success(function (result) {
    // here i use the result data to get ids of the dropdown values and
    //fill the form
}

由于$getjson调用的网络定时，来自可观察数组的数据没有被填充（无法分配结果id对象，因为我想getjson-reponse需要更多的时间来加载）我该如何处理这个

根据建议，我使用了then（）而不是done（

如果您希望您的promise按顺序链接，则需要使用.then()方法，并确保从成功处理程序返回任何新的promise，以便使它们可链接。

$.getJSON('first')
  .then(function(){
     return $getJSON('second');
   })
   .then(function(){
     return $.getJSON('third');
   });

一旦第一个调用"完成"，您现在拥有的代码就会立即运行，因为您并没有真正链接承诺，您只是在第一个承诺中添加了一堆成功处理程序。

下面是一个示例，显示了这两种方法之间的差异。

(function(){
  function sayHelloAsync(msg){
    var def = jQuery.Deferred();
    
    setTimeout(function(){
      $("<div>" + msg + "</div>").appendTo("#messages");
      def.resolve();
    }, getRandomInt(300, 1500));
    
    return def.promise();
  }
  
  function clearMessages(){
    $("#messages").html('');
  }
  
  function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
  
  function allAtOnce(){
    clearMessages();
    
    sayHelloAsync("first")
    .done(function(){
      sayHelloAsync("second");
    })
  .done(function(){
      sayHelloAsync("third");
    })
  .done(function(){
      sayHelloAsync("fourth");
    });
  }
  
  function ordered(){
    clearMessages();
    
    sayHelloAsync("first")
    .then(function(){
      return sayHelloAsync("second");
    })
  .then(function(){
      return sayHelloAsync("third");
    })
  .then(function(){
      return sayHelloAsync("fourth");
    });
  }
  $("#allAtOnce").on('click', allAtOnce);
  $("#ordered").on('click', ordered);
  
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="allAtOnce" type="button">All At Once</button>
<button id="ordered" type="button">Ordered</button>
<h2>Messages</h2>
<div id="messages">
</div>

+1表示Josh。

一种更为Knockout的方法是将每个可观察的subscribe设置为它所依赖的可观察对象（注意，您可以将observableArray作为成功函数传递，不需要包装它）。

self.Irr = ko.observableArray([]);
self.Crp = ko.observableArray([]);
self.Incr = ko.observableArray([]);
self.Brnd = ko.observableArray([]);
self.Sec4 = ko.observableArray([]);
$.getJSON("GetIrr", null, self.Irr);
self.Irr.subscribe(function () {
    $.getJSON("GetCrp", null, self.Crp);
});
self.Crp.subscribe(function () {
    $.getJSON("GetTill", null, self.Sec4);
});

等等。

相关文章：