缓存Ajax请求

Caching Ajax Request

本文关键字：请求 Ajax 缓存      更新时间：2023-09-26

使用的语言/软件/技术:PHP, MySQL, WordPress, Javascript, jQuery(最新)。

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

在文档中填充state元素。通过Ajax调用从数据库中检索可用状态的函数来准备。city元素是通过对状态元素更改事件的Ajax调用来填充的，这是基于从数据库中选择的州中的可用城市。

我试图学习如何缓存(也许不是正确的术语)的请求，以便可用的城市坚持在一个已经选择的状态被重新选择从它移动后。例如，第一次选择时，我选NC。下一个选择是NY。然后我回到北卡罗来纳;目前ajax调用是在返回NC后再次进行的。我希望将结果存储起来，这样就不会有那么多的查询被抛出。

欢迎任何建议，我还在挖掘!谢谢。

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);
        }
    });
}

在上面的代码中，状态是两个字母的代码，从state元素更改事件传递到别处。这个ajax调用调用的PHP函数使用state参数处理select语句。

我只需将城邦的响应存储在一个对象中，就像这样:

// 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);
}
相关文章：