0

使用されている言語/ソフトウェア/テクノロジー：PHP、MySQL、WordPress、Javascript、jQuery（最新）。

ページに2つの選択要素があります。1つは州用、もう1つは都市用です。

状態要素は、データベースから使用可能な状態を取得する関数へのAjax呼び出しによってdocument.readyに入力されます。city要素は、データベースから選択された状態で使用可能な都市に基づいて、状態要素変更イベントのAjax呼び出しを介して入力されます。

私は、リクエストをキャッシュする方法（おそらく適切な用語ではない）を学習しようとしています。これにより、選択済みの状態が離れた後に再選択された場合に、利用可能な都市が維持されます。たとえば、初めて選択肢を選ぶときは、NCを選びます。私が選ぶ次の選択肢はニューヨークです。その後、ノースカロライナに戻ります。現在、NCに戻った後、ajax呼び出しが再度行われます。あまり多くのクエリがスローされないように、結果を保存したいと思います。

どんな提案も歓迎します、私はまだ掘っています！ありがとう。

function get_cities(state){
    $.ajax({
        type:'POST',
        data:{action:'generate_city_inputs', state:state},
        cache: true,
        dataType: 'json',
        async:false,
        url: "<?php echo site_url().'/wp-admin/admin-ajax.php'; ?>",
        success: function(value) {
            cityhtml = '';
            for (var i = 0; i < value.length; i++) {
                cityhtml += "<option value=\"";
                cityhtml += value[i][0] + "\">";
                cityhtml += value[i][0] + "</option>";
            }
            $("select#search-city").empty().append(cityhtml);
        }
    });
}

上記のコードでは、状態は2文字のコードであり、状態要素の変更イベントから別の場所に渡されます。このajax呼び出しによって呼び出されるPHP関数は、stateパラメーターを使用してselectステートメントを処理します。

4

1 に答える 1

3

州の都市の応答を次のようなオブジェクトに保存します。

// Declared at the top of your script, global.
var cachedCities = {};

get_citiesこのようにコードを変更して、最初にキャッシュをチェックするようにします。空の場合は、ajax呼び出しを実行します。成功コールバックはキャッシュにデータを入力します。選択ボックスにデータを入力するためのコードは、に分割されていpopulateCities()ます。

function get_cities(state){
    if (cachedCities[state]) {
        var value = cachedCities[state];
        populateCities(value);
    } else {
        $.ajax({
            type:'POST',
            data:{action:'generate_city_inputs', state:state},
            cache: true,
            dataType: 'json',
            async:false,
            url: "<?php echo site_url().'/wp-admin/admin-ajax.php'; ?>",
            success: function(value) {
                cachedCities[state] = value;
                populateCities(value);
            }
        });
    }
}

var populateCities = function(value) {
    cityhtml = '';
    for (var i = 0; i < value.length; i++) {
        cityhtml += "<option value=\"";
        cityhtml += value[i][0] + "\">";
        cityhtml += value[i][0] + "</option>";
    }
    $("select#search-city").empty().append(cityhtml);
}
于 2013-03-25T22:30:18.057 に答える