Question

我遇到了一些Ajax调用问题。我正在努力改善我的网站的性能，而我想做的一件事就是只发射一次ajax，如果它们之前已被解雇过，而不是解雇它们。

我的一个场景。我有2个选择下拉菜单 - 国家和地区。更改国家/地区时，会触发.change，触发ajax以获取所选国家/地区的区域。现在，例如，如果我选择国家印度，Ajax被解雇，并将其更改为冰岛，ajax被解雇。现在，如果我将我的国家改回印度，不应该解雇Ajax，因为我已经从服务器获取了数据。

CODE

$("#select_list_id").change(function(){
    var url = 'ajax.php?val=' + this.value;
    $.ajax({
      url: url,
      success: function(json){
        for(i=0; i<jsonData.length;i++) {
          $("#select_list_2_id").append(new Option(jsonData[i].title,jsonData[i].id));
        }
      }
    });
  })

我的方法可以存储返回的json，并在更改时比较countryID，如果值已经存在，则返回json，否则点击Ajax。但是我的项目中有近100个ajax调用，这个过程可能需要一段时间。

如果有人可以帮助我，那么如何概括这段代码。

除了这一切，在搜索时我发现这可以通过jquery一次插件完成，如果是这样，有人可以提供一些帮助。

更新 - 谢谢大家，这对我有帮助，现在情况相当不错:) 只是另一个小问题，一旦插件有什么用于jquery呢？是用于相同的东西吗？

Answer 1

如果你可以推广你的ajax调用，你可以通过请求uri（url + params）缓存结果json

类似的东西：

var ajaxCache = [];

function ajaxCall(url,successFunc)
{
    if(ajaxCache[url] != undefined)
    {
        successFunc(ajaxCache[url]);
    }
    else
    {
        $.ajax({
            url: url,
                success: function(json){
                    ajaxCache[url] = json;
                successFunc(json);
                }
            });
    }
}

$("#select_list_id").change(function(){
    ajaxCall('ajax.php?val=' + this.value, function(json){
        for(i=0; i<jsonData.length;i++) {
            $("#select_list_2_id").append(new Option(jsonData[i].title,jsonData[i].id));
        }
    });
});

Answer 2

您可以将响应存储在发出该请求的选项上：

$("#select_list_id").change(function() {
    var $selected = $(this).children(":selected");

    if ( $selected.data("json") ) {
        build( $selected.data("json") );
    }
    else {
        $.ajax({
            url: 'ajax.php?val=' + this.value,
            success: function(json) {
                $selected.data("json", json);
                build(json);
            }
        });
    }

    function build(jsonData) {
        for(i=0; i<jsonData.length;i++) {
            $("#select_list_2_id").append(new Option(jsonData[i].title,jsonData[i].id));
        }
    }
});

Answer 3

假设请求未缓存，这仍然相对简单。您将维护一个带有国家/地区名称的对象作为键和选项作为值：

var countries = {};
.change(...
   var country = this.value;
   if (!countries.hasOwnProperty(country)) {
      countries[country] = [];
      $.ajax ...
         for (var i = 0; ...
            countries[country].push(new Option(...

   }
   //Iteration may be needed
   $("#select_list_2_id").empty().append(countries[country]);

如果已经被解雇，只发射一次Jquery ajax

3 个答案: