หยุด jQuery .load การตอบสนองจากการแคช


244

ฉันมีรหัสต่อไปนี้ทำให้ได้รับคำขอใน URL:

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

แต่ผลลัพธ์ที่ได้กลับคืนมาไม่ได้สะท้อนเสมอไป ตัวอย่างเช่นฉันทำการเปลี่ยนแปลงในการตอบสนองที่คายการติดตามสแต็ก แต่การติดตามสแต็กไม่ปรากฏเมื่อฉันคลิกที่ปุ่มค้นหา ฉันดูโค้ด PHP พื้นฐานที่ควบคุมการตอบกลับอาแจ็กซ์และมันมีรหัสที่ถูกต้องและการเยี่ยมชมหน้านั้นโดยตรงแสดงผลลัพธ์ที่ถูกต้อง แต่ผลลัพธ์ที่ส่งคืนโดย. load เก่า

ถ้าฉันปิดเบราว์เซอร์และเปิดใหม่อีกครั้งมันจะทำงานหนึ่งครั้งจากนั้นเริ่มส่งคืนข้อมูลเก่า ฉันสามารถควบคุมสิ่งนี้ได้โดย jQuery หรือฉันจำเป็นต้องให้ส่วนหัวเอาต์พุตสคริปต์ PHP ของฉันเพื่อควบคุมการแคช?

คำตอบ:


419

คุณต้องใช้ฟังก์ชั่นที่ซับซ้อนมากขึ้นเช่น$.ajax()ถ้าคุณต้องการควบคุมการแคชตามคำขอต่อ หรือหากคุณต้องการปิดการใช้งานสำหรับทุกสิ่งให้วางที่ด้านบนสุดของสคริปต์ของคุณ:

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

2
ขอบคุณ! สิ่งนี้อยู่ในเอกสาร jQuery หรือไม่? อ่า ... พบแล้ว ชนิดของผลเบอร์รี่ สิ่งนี้ได้รับการเตะก้นโดยส่วนใหญ่ของวัน ... ขอบคุณอีกครั้ง!
bytebender

35
แคชทั้งหมดนี้: false จะผนวกตัวเลข (ฉันเชื่อว่านี่เป็นเวลาประทับ) ต่อท้าย URL เมื่อมีการร้องขอ สถานที่อื่น ๆ ในการจัดการการตั้งค่าแคชนั้นมาจากเซิร์ฟเวอร์หรือเว็บแอพโดยการตั้งค่าส่วนหัวการตอบสนอง HTTP ต่างๆเช่น Expires, Pragma ฯลฯ ...
Bryan Rehbein

1
ข้อมูลชิ้นนี้ทำให้ฉันมีความสุขมาก - ช่วยให้ฉันพบข้อบกพร่องที่จู้จี้จริงๆ
Luke101

รักมัน! ตอนนี้ฉันไม่ต้องใช้การโทร. jax สุดเหวี่ยงและสามารถใช้ทางลัด!
Gattster

1
ยอดเยี่ยม - ฉันต้องการพบฟังก์ชั่นนี้ แต่ไม่ทราบว่ามันจะทำงานในสิ่งที่ง่ายเป็นโหลดเอกสารข้อความลงใน div โดยใช้ .load
แดน

107

นี่คือตัวอย่างของวิธีการควบคุมการแคชตามคำขอต่อ

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

7
ฉันชอบวิธีนี้ดีกว่าปิดการแคชทั้งหมด
พอลทอมบลิน

ฉันชอบสิ่งนี้ด้วยที่จะไม่ปิดการแคชทั้งหมด ดูที่โพสต์นี้ด้วยเช่นกัน [link] stackoverflow.com/questions/4245231/…สำหรับการกรอง
Dan Doyon

@Marshall รหัสที่นี่คุณไม่ได้พูดถึง POST หรือรับชนิด ...... ดังนั้นค่าเริ่มต้นสำหรับ jquery คืออะไร?
โทมัส

วิธีการเริ่มต้นคือ GET
Rich T.

35

วิธีหนึ่งคือการเพิ่มหมายเลขเฉพาะลงในส่วนท้ายของ URL:

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

จุดที่คุณเขียน uniqueId () เพื่อส่งคืนสิ่งที่แตกต่างในแต่ละครั้งที่มีการเรียกใช้


1
ง่ายยิ่งขึ้นเพียงใช้(+new Date)(หรือnew Date().getTime()ถ้าคุณเป็นคนขี้เหนียว) ดูคุณจะได้รับการประทับเวลาใน JavaScript ได้อย่างไร
สาม

ถามคำถามใหม่และเชื่อมโยงได้ที่นี่ หากคุณทำถูกต้องคุณกำลังสร้าง URL ใหม่ที่สมบูรณ์ดังนั้นเบราว์เซอร์อาจไม่สามารถแคชได้
Lou Franco

ใช้สิ่งนี้เพื่อแก้ปัญหาที่ไม่เกี่ยวข้อง ทำงานรักษา
อเล็กซ์

9

อีกวิธีในการใส่บรรทัดด้านล่างเมื่อต้องการรับข้อมูลจากเซิร์ฟเวอร์ต่อท้ายบรรทัดด้านล่างพร้อมกับ ajax url ของคุณ

'? _ =' + 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;
}

นี่เกือบจะเป็นกลอุบายของฉัน ยกเว้นฟังก์ชันการเรียกกลับมีค่า "this" ไม่ถูกต้อง ฉันเปลี่ยนการเรียก func () เป็นสิ่งต่อไปนี้เพื่อแก้ไขปัญหานี้: func.call(elem, data, textStatus, XMLHttpRequest);
GeekyMonkey

5

Sasha เป็นความคิดที่ดีฉันใช้มิกซ์

ฉันสร้างฟังก์ชั่น

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

และเรียกใช้ส่วนต่างๆของหน้าเว็บของฉันเช่น on init:

เริ่ม: ฟังก์ชัน (actionUrl1, actionUrl2, actionUrl3) {

var ตัวอย่าง JS = {

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

ตัวอย่าง JS.LoadWithoutCache (actionUrl2, "div2"); ตัวอย่าง JS.LoadWithoutCache (actionUrl3, "div3"); }},


4

นี่เป็นเรื่องน่ารำคาญใน IE โดยทั่วไปคุณต้องส่งส่วนหัว HTTP 'ไม่แคช' กลับมาพร้อมกับการตอบกลับของคุณจากเซิร์ฟเวอร์


3

สำหรับ PHP ให้เพิ่มบรรทัดนี้ลงในสคริปต์ของคุณซึ่งให้บริการข้อมูลที่คุณต้องการ:

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

หรือเพิ่มตัวแปรเฉพาะลงในสตริงแบบสอบถาม:

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

ตัวเลือกแคช: false บนฟังก์ชัน $ .ajax จะเพิ่มตัวแปรเฉพาะลงในสตริงการสืบค้นเช่นเดียวกับข้อเสนอแนะที่สองของคุณ
Bryan Rehbein

2

อย่าใช้การประทับเวลาเพื่อสร้าง URL ที่ไม่ซ้ำกันสำหรับทุกหน้าที่คุณเข้าชมถูกแคชใน DOM โดย jquery mobile และในไม่ช้าคุณก็ประสบปัญหาเรื่องหน่วยความจำในมือถือหมด

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

รหัสนี้เปิดใช้งานก่อนที่จะโหลดหน้าเว็บคุณสามารถใช้ url.indexOf () เพื่อตรวจสอบว่า URL นั้นเป็น URL ที่คุณต้องการแคชหรือไม่และตั้งค่าพารามิเตอร์แคชตามลำดับ

ห้ามใช้ window.location = ""; เพื่อเปลี่ยน URL มิฉะนั้นคุณจะไปยังที่อยู่และเพจที่โหลดไว้จะไม่เริ่มทำงาน เพื่อแก้ไขปัญหานี้ให้ใช้ window.location.hash = "";


1
$ jqm คืออะไร $ jqm = $? $ .mobile.cache ไม่ได้กำหนด
Luciuz

2

หากคุณต้องการใช้เมธอด. load () ของ Jquery ให้เพิ่มบางอย่างที่ไม่ซ้ำกับ URL เช่นเวลาประทับ JavaScript "+ ใหม่วันที่ (). getTime ()" สังเกตุฉันต้องเพิ่ม "& time =" ดังนั้นมันจะไม่เปลี่ยนตัวแปร pid ของคุณ

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

1

คุณสามารถแทนที่ฟังก์ชั่นการโหลด jquery ด้วยเวอร์ชันที่ตั้งค่าแคชเป็นเท็จ

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

วางที่ใดที่หนึ่งทั่วโลกที่จะทำงานหลังจากโหลด jquery และคุณควรจะพร้อม รหัสโหลดที่มีอยู่ของคุณจะไม่ถูกแคชอีกต่อไป


0

ลองสิ่งนี้:

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

มันใช้งานได้ดีเมื่อฉันใช้มัน


0

ฉันสังเกตเห็นว่าหากเซิร์ฟเวอร์บางตัว (เช่น Apache2) ไม่ได้รับการกำหนดค่าให้อนุญาตหรือปฏิเสธ "แคช" โดยเฉพาะเซิร์ฟเวอร์อาจส่งการตอบสนองที่ "แคช" ถึงแม้ว่าคุณจะตั้งค่าส่วนหัว HTTP เป็น "ไม่มีแคช" ก็ตาม ดังนั้นตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ของคุณไม่ "แคช" อะไรก่อนที่จะส่งคำตอบ:

ในกรณีของ Apache2 คุณต้อง

1) แก้ไขไฟล์ "disk_cache.conf" - เพื่อปิดการใช้งานแคชเพิ่มคำสั่ง "CacheDisable / local_files"

2) โมดูลโหลด mod_cache (บน Ubuntu "sudo a2enmod แคช" และ "sudo a2enmod disk_cache")

3) รีสตาร์ท Apache2 (Ubuntu "sudo service apache2 restart");

สิ่งนี้ควรทำเคล็ดลับการปิดใช้งานแคชในฝั่งเซิร์ฟเวอร์ ไชโย! :)


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.