Question

我有一个完全正常工作的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));
 ?>

如果有人可以提供一些示例代码来开始，我很乐意欣赏它。感谢。

Answer 1

如果你想从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();

}

未经测试，但您应该明白这一点：）

在Jquery中缓存AJAX POST响应

1 个答案: