0

我的 Ajax 调用遇到了一些问题。我正在努力提高我网站的性能，为此我想做的一件事就是只触发一次 ajax，如果他们之前被解雇过，而不是解雇他们。

我的情景之一。我有 2 个选择下拉菜单 - 国家和地区。当一个国家被改变时，.change 被触发，它触发一个 ajax 来获取所选国家的区域。现在，例如，如果我选择国家 India，Ajax 将被触发，并将其更改为 Iceland，ajax 将被触发。现在，如果我将我的国家改回印度，则不应解雇 Ajax，因为我已经从服务器获取数据。

代码

$("#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 once 插件来完成，如果是这样，有人可以提供一些帮助。

更新 - 谢谢大家，这确实帮助了我，现在情况很好:) 只是另一个小查询，那么 jquery once 插件的用途是什么？它用于相同的东西吗？

4

3 回答 3

1

if you can generalize your ajax calls, you could cache the result json by the request uri (url+params)

something like this:

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));
        }
    });
});
于 2013-01-14T11:56:09.027 回答
1

You can store the response on the option that has emitted that request:

$("#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));
        }
    }
});
于 2013-01-14T11:59:33.933 回答
0

Assuming that the request is not cached, this is still relatively simple. You would maintain an object with country names as the keys and options as the values:

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]);
于 2013-01-14T11:57:53.773 回答