1

我在下面有一个完整的 JS 代码，但它会为每个点击事件向服务器发送 POST 请求。如何缓存下面的 AJAX 发布响应？理想情况下，缓存应该保存为 JS 变量。如果它已经加载并存在于缓存中，它将被显示（不执行 POST）。如果它还没有加载，它会做一个 POST 请求并保存在缓存中然后显示。

jQuery( document ).ready( function( $ ) {
var _doing_ajaxx = false;
$('.toolbar').remove();
$('#mydiv #frontend').click(function() {    
    if (_doing_ajaxx) {
        return false;
    }

    var title_shortcode = $(this).text();


    var insert_namex=  $(this).attr('class');


    var titlejsselector=title_shortcode.replace(/ /g,'');


    var buttonval=$('#'+titlejsselector+' input').val();

    if (buttonval=='Minimize')  {
    //stop ajax request if button is set

        $('#'+titlejsselector+' div').remove();
        $('#'+titlejsselector+' input').remove();

    } else {
    //initialize ajax variables

    var data = {
            action: 'test_ajax_response',
            test_ajax_response_nonce: the_ajax_script.test_ajax_response_nonce, 
            postID_from_ajax : the_ajax_script.postid_to_ajax,
            insert_name_ajax: insert_namex,
            title_ajax: title_shortcode
        };      
    //do an ajax request
    _doing_ajaxx = true;
    $.post(the_ajax_script.ajaxurl, data, function(response) {

        $(this).next().slideToggle();   
        $('#mydiv #'+titlejsselector).append(response+"<input type='hidden' id='minimizebutton' value='Minimize'>");
        SyntaxHighlighter.highlight();

        $('.toolbar').remove();
        _doing_ajaxx = false;
    });

    }
    //return false;
}); 


});

我尝试使用 PHP 添加此代码，但它不起作用：

 <?php
 header("Cache-Control: private, max-age=$seconds");
 header("Expires: ".gmdate('r', time()+$seconds));
 ?>

如果有人可以提供一些示例代码来入门，我将很高兴。谢谢。

4

1 回答 1

2

如果你想从 JS 中缓存（所以如果他们重新加载页面，缓存将不再存在），我会创建一个对象并存储结果：

var cacheObj = {};

然后，当您要发送请求时：

if (cacheObj.postID_from_ajax){

    display(cacheObj.postID);

}else{

    // Do your ajax call
    $.post(the_ajax_script.ajaxurl, data, function(response) {

        _doing_ajaxx = false;
        cacheObj.postID_from_ajax = response;
        display(response);

    });
}

function display(response){

    $('#mydiv #frontend').next().slideToggle();   
    $('#mydiv #'+titlejsselector).append(response+"<input type='hidden' id='minimizebutton' value='Minimize'>");
    SyntaxHighlighter.highlight();

    $('.toolbar').remove();

}

未经测试，但你应该明白了:)

于 2013-01-03T11:00:01.287 回答