0

使用的语言/软件/技术：PHP、MySQL、WordPress、Javascript、jQuery（最新）。

我在一个页面上有两个选择元素——一个用于州，一个用于城市。

state 元素通过 Ajax 调用从数据库中检索可用状态的函数填充到 document.ready。city 元素通过 Ajax 调用 state 元素更改事件填充，基于所选州的可用城市，同样来自数据库。

我正在尝试学习如何缓存（也许不是正确的术语）请求，以便在离开已经选择的状态后重新选择的情况下，可用的城市仍然存在。例如，当我第一次选择一个选项时，我选择了 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);
        }
    });
}

在上面的代码中，状态是两个字母的代码，从状态元素更改事件传递到其他地方。此 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 回答