0

Ajax 呼び出しでいくつかの問題に直面しています。私は自分のサイトのパフォーマンスを改善するために取り組んでいます。そのためにやりたいことの 1 つは、ajax を一度だけ起動することです。

マイシナリオの一つ。国とゾーンの 2 つの選択ドロップダウンがあります。国が変更されると、選択した国のゾーンを取得するために ajax を起動する .change が起動されます。たとえば、国インドを選択すると、Ajax が起動し、アイスランドに変更すると、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プラグインでもこれを実行できることがわかりました。もしそうなら、誰かがこれについて助けてください。

更新 - ありがとうございます。同じものに使用されますか？

4

3 に答える 3

1

そのリクエストを発行したオプションにレスポンスを保存できます。

$("#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 に答える
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));
        }
    });
});
于 2013-01-14T11:56:09.027 に答える
0

リクエストがキャッシュされていないと仮定すると、これはまだ比較的単純です。国名をキーに、オプションを値に持つオブジェクトを維持します。

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 に答える