Dừng phản hồi jQuery .load khỏi bộ nhớ cache


244

Tôi có đoạn mã sau đây thực hiện yêu cầu NHẬN trên URL:

$('#searchButton').click(function() {
    $('#inquiry').load('/portal/?f=searchBilling&pid=' + $('#query').val());            
});

Nhưng kết quả trả về không phải lúc nào cũng được phản ánh. Ví dụ: tôi đã thực hiện một thay đổi trong phản hồi phun ra dấu vết ngăn xếp nhưng dấu vết ngăn xếp không xuất hiện khi tôi nhấp vào nút tìm kiếm. Tôi đã xem mã PHP cơ bản kiểm soát phản hồi ajax và nó có mã chính xác và truy cập trang trực tiếp cho thấy kết quả chính xác nhưng đầu ra được trả về bởi .load đã cũ.

Nếu tôi đóng trình duyệt và mở lại, nó sẽ hoạt động một lần và sau đó bắt đầu trả về thông tin cũ. Tôi có thể kiểm soát điều này bằng jQuery hay tôi cần phải có các tiêu đề đầu ra tập lệnh PHP để kiểm soát bộ đệm ẩn?

Câu trả lời:


419

Bạn phải sử dụng một chức năng phức tạp hơn như $.ajax()nếu bạn muốn kiểm soát bộ đệm ẩn trên cơ sở mỗi yêu cầu. Hoặc, nếu bạn chỉ muốn tắt nó cho mọi thứ, hãy đặt nó ở đầu tập lệnh của bạn:

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

2
cảm ơn bạn! Điều này thậm chí nằm trong tài liệu jQuery? À ... đã tìm thấy nó. Kiểu vùi dập. Điều này đã được đá bằng mông trong hầu hết các ngày ... Cảm ơn một lần nữa!
bytebender

35
Tất cả bộ đệm này: false thực hiện thêm một số (tôi tin rằng đó là dấu thời gian) vào cuối url khi thực hiện yêu cầu. Một nơi khác để xử lý các cài đặt bộ đệm là từ máy chủ hoặc ứng dụng web bằng cách đặt các tiêu đề phản hồi HTTP khác nhau, như Hết hạn, Thực dụng, v.v ...
Bryan Rehbein

1
Thông tin này đã giúp tôi rất nhiều - nó đã giúp tôi xác định được một lỗi thực sự dai dẳng
Luke101

Yêu nó! Bây giờ tôi không phải sử dụng các cuộc gọi .ajax quá dài và có thể sử dụng các phím tắt!
Gattster

1
Brilliant - Tôi đã tìm thấy chức năng này nhưng không biết nó sẽ hoạt động trên một thứ đơn giản như tải tài liệu văn bản vào div bằng cách sử dụng .load
Dan

107

Dưới đây là một ví dụ về cách kiểm soát bộ đệm ẩn trên cơ sở mỗi yêu cầu

$.ajax({
    url: "/YourController",
    cache: false,
    dataType: "html",
    success: function(data) {
        $("#content").html(data);
    }
});

7
Tôi thích cách này tốt hơn nhiều so với việc tắt tất cả bộ nhớ đệm.
Paul Tomblin

Tôi cũng thích điều này vì đã không tắt tất cả bộ nhớ đệm. Ngoài ra, hãy xem bài đăng này cũng [link] stackoverflow.com/questions/4245231/ trên để lọc.
Dan Doyon

@Marshall mã ở đây bạn đã không đề cập đến POST hoặc Get type ...... vậy mặc định cho jquery là gì?
Thomas

phương thức mặc định là GET
Rich T.

35

Một cách là thêm một số duy nhất vào cuối url:

$('#inquiry').load('/portal/?f=searchBilling&pid=' + $('#query').val()+'&uid='+uniqueId());

Nơi bạn viết uniqueId () để trả về một cái gì đó khác nhau mỗi lần nó được gọi.


1
Thậm chí dễ dàng hơn, chỉ cần sử dụng (+new Date)(hoặc new Date().getTime()nếu bạn là một stickler). Xem Làm thế nào để bạn có được dấu thời gian trong JavaScript?
thứ ba

Đặt một câu hỏi mới và liên kết nó ở đây. Nếu bạn đã làm đúng, bạn đang tạo các URL hoàn toàn mới, do đó trình duyệt có thể được lưu vào bộ nhớ cache.
Lou Franco

đã sử dụng điều này để giải quyết một vấn đề không liên quan. làm việc một điều trị.
Alex

9

Một cách tiếp cận khác để chỉ đặt dòng dưới đây khi yêu cầu lấy dữ liệu từ máy chủ, Nối dòng dưới đây cùng với url ajax của bạn.

'? _ =' + Math.round (Math.random () * 10000)


6
/**
 * Use this function as jQuery "load" to disable request caching in IE
 * Example: $('selector').loadWithoutCache('url', function(){ //success function callback... });
 **/
$.fn.loadWithoutCache = function (){
 var elem = $(this);
 var func = arguments[1];
 $.ajax({
     url: arguments[0],
     cache: false,
     dataType: "html",
     success: function(data, textStatus, XMLHttpRequest) {
   elem.html(data);
   if(func != undefined){
    func(data, textStatus, XMLHttpRequest);
   }
     }
 });
 return elem;
}

Điều này gần như đã lừa tôi. Ngoại trừ chức năng gọi lại có giá trị "này" không chính xác. Tôi đã thay đổi lệnh gọi func () thành như sau để sửa lỗi này: func.call(elem, data, textStatus, XMLHttpRequest);
GeekyMonkey

5

Sasha là ý tưởng tốt, tôi sử dụng hỗn hợp.

Tôi tạo một hàm

LoadWithoutCache: function (url, source) {
    $.ajax({
        url: url,
        cache: false,
        dataType: "html",
        success: function (data) {
            $("#" + source).html(data);
            return false;
        }
    });
}

Và gọi cho các phần khác nhau của trang của tôi, ví dụ như trên init:

Ban đầu: function (actionUrl1, actionUrl2, actionUrl3) {

var Ví dụJS = {

Init: function (actionUrl1, actionUrl2, actionUrl3)           ExampleJS.LoadWithoutCache(actionUrl1, "div1");

Ví dụJS.LoadWithoutCache (actionUrl2, "div2"); Ví dụJS.LoadWithoutCache (actionUrl3, "div3"); }},


4

Điều này đặc biệt khó chịu trong IE. Về cơ bản, bạn phải gửi lại tiêu đề HTTP 'không có bộ đệm' với phản hồi của bạn từ máy chủ.


3

Đối với PHP, hãy thêm dòng này vào tập lệnh của bạn để phục vụ thông tin bạn muốn:

header("cache-control: no-cache");

hoặc, thêm một biến duy nhất vào chuỗi truy vấn:

"/portal/?f=searchBilling&x=" + (new Date()).getTime()

Tùy chọn cache: false trên hàm $ .ajax sẽ tự động thêm biến duy nhất vào chuỗi truy vấn như đề xuất thứ hai của bạn.
Bryan Rehbein

2

KHÔNG sử dụng dấu thời gian để tạo một URL duy nhất vì mỗi trang bạn truy cập được lưu trong DOM bởi jquery mobile và bạn sẽ sớm gặp phải vấn đề hết bộ nhớ trên điện thoại di động.

$jqm(document).bind('pagebeforeload', function(event, data) {
    var url = data.url;
    var savePageInDOM = true;

    if (url.toLowerCase().indexOf("vacancies") >= 0) {
        savePageInDOM = false;
    }

    $jqm.mobile.cache =  savePageInDOM;
})

Mã này kích hoạt trước khi trang được tải, bạn có thể sử dụng url.indexOf () để xác định xem URL có phải là bộ đệm bạn muốn lưu trữ hay không và đặt tham số bộ đệm phù hợp.

Không sử dụng window.location = ""; để thay đổi URL nếu không bạn sẽ điều hướng đến địa chỉ và pagebeforeload sẽ không kích hoạt. Để giải quyết vấn đề này, chỉ cần sử dụng window.location.hash = "";


1
$ jqm là gì? $ jqm = $? $ .mobile.cache không xác định
Luciuz

2

Nếu bạn muốn gắn bó với phương thức .load () của Jquery, hãy thêm một cái gì đó duy nhất vào URL như dấu thời gian JavaScript. "+ Ngày mới (). getTime ()". Lưu ý rằng tôi đã phải thêm "& time =" để nó không làm thay đổi biến pid của bạn.

$('#searchButton').click(function() {
$('#inquiry').load('/portal/?f=searchBilling&pid=' + $('#query').val()+'&time='+new Date().getTime());            
});

1

Bạn có thể thay thế chức năng tải jquery bằng một phiên bản có bộ đệm được đặt thành false.

(function($) {
  var _load = jQuery.fn.load;
  $.fn.load = function(url, params, callback) {
  if ( typeof url !== "string" && _load ) {
        return _load.apply( this, arguments );
  }
    var selector, type, response,
      self = this,
      off = url.indexOf(" ");

    if (off > -1) {
      selector = stripAndCollapse(url.slice(off));
      url = url.slice(0, off);
    }

    // If it's a function
    if (jQuery.isFunction(params)) {

      // We assume that it's the callback
      callback = params;
      params = undefined;

      // Otherwise, build a param string
    } else if (params && typeof params === "object") {
      type = "POST";
    }

    // If we have elements to modify, make the request
    if (self.length > 0) {
      jQuery.ajax({
        url: url,

        // If "type" variable is undefined, then "GET" method will be used.
        // Make value of this field explicit since
        // user can override it through ajaxSetup method
        type: type || "GET",
        dataType: "html",
        cache: false,
        data: params
      }).done(function(responseText) {

        // Save response for use in complete callback
        response = arguments;

        self.html(selector ?

          // If a selector was specified, locate the right elements in a dummy div
          // Exclude scripts to avoid IE 'Permission Denied' errors
          jQuery("<div>").append(jQuery.parseHTML(responseText)).find(selector) :

          // Otherwise use the full result
          responseText);

        // If the request succeeds, this function gets "data", "status", "jqXHR"
        // but they are ignored because response was set above.
        // If it fails, this function gets "jqXHR", "status", "error"
      }).always(callback && function(jqXHR, status) {
        self.each(function() {
          callback.apply(this, response || [jqXHR.responseText, status, jqXHR]);
        });
      });
    }

    return this;
  }
})(jQuery);

Đặt cái này ở đâu đó trên toàn cầu nơi nó sẽ chạy sau khi tải jquery và bạn sẽ hoàn tất. Mã tải hiện tại của bạn sẽ không còn được lưu trữ.


0

Thử cái này:

$("#Search_Result").load("AJAX-Search.aspx?q=" + $("#q").val() + "&rnd=" + String((new Date()).getTime()).replace(/\D/gi, ''));

Nó hoạt động tốt khi tôi sử dụng nó.


0

Tôi nhận thấy rằng nếu một số máy chủ (như Apache2) không được cấu hình để cho phép hoặc từ chối bất kỳ "bộ đệm" nào, thì máy chủ có thể mặc định gửi phản hồi "được lưu trong bộ nhớ cache", ngay cả khi bạn đặt tiêu đề HTTP thành "không có bộ đệm". Vì vậy, hãy đảm bảo rằng máy chủ của bạn không "lưu vào bộ nhớ cache" bất cứ điều gì trước khi nó phản hồi:

Trong trường hợp của Apache2, bạn phải

1) chỉnh sửa tệp "đĩa_cache.conf" - để tắt bộ đệm, hãy thêm lệnh "CacheDisable / local_files"

2) tải các mô-đun mod_cache (Trên Ubuntu "sudo a2enmod cache" và "sudo a2enmod đĩa_cache")

3) khởi động lại Apache2 (Ubuntu "sudo dịch vụ apache2 restart");

Điều này sẽ thực hiện thủ thuật vô hiệu hóa bộ nhớ cache ở phía máy chủ. Chúc mừng! :)


0

Mã này có thể giúp bạn

var sr = $("#Search Result");
sr.load("AJAX-Search.aspx?q=" + $("#q")
.val() + "&rnd=" + String((new Date).getTime())
.replace(/\D/gi, ""));
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.