URLでGETリクエストを行う次のコードがあります。
$('#searchButton').click(function() {
$('#inquiry').load('/portal/?f=searchBilling&pid=' + $('#query').val());
});
ただし、返された結果が常に反映されるわけではありません。たとえば、スタック トレースを吐き出す応答を変更したのに、検索ボタンをクリックしてもスタック トレースが表示されませんでした。ajax 応答を制御する基礎となる PHP コードを調べたところ、正しいコードがあり、ページに直接アクセスすると正しい結果が示されましたが、.load によって返された出力は古いものでした。
ブラウザを閉じて再度開くと、一度動作してから古い情報が返され始めます。jQuery でこれを制御できますか、それともキャッシュを制御するために PHP スクリプト出力ヘッダーが必要ですか?
$.ajax()リクエストごとにキャッシュを制御する場合など、より複雑な関数を使用する必要があります。または、すべての機能をオフにしたい場合は、スクリプトの先頭に次のように配置します。
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
リクエストごとにキャッシュを制御する方法の例を次に示します。
$.ajax({
url: "/YourController",
cache: false,
dataType: "html",
success: function(data) {
$("#content").html(data);
}
});
1 つの方法は、URL の末尾に一意の番号を追加することです。
$('#inquiry').load('/portal/?f=searchBilling&pid=' + $('#query').val()+'&uid='+uniqueId());
uniqueId() を記述して、呼び出されるたびに異なるものを返す場所。
サーバーからデータを取得する必要がある場合にのみ以下の行を配置する別のアプローチは、以下の行を ajax URL と共に追加します。
'?_='+Math.round(Math.random()*10000)
サーシャは良いアイデアです。私はミックスを使用しています。
関数を作成します
LoadWithoutCache: function (url, source) {
$.ajax({
url: url,
cache: false,
dataType: "html",
success: function (data) {
$("#" + source).html(data);
return false;
}
});
}
そして、たとえば初期化時に、私のページのさまざまな部分を呼び出します。
Init: 関数 (actionUrl1, actionUrl2, actionUrl3) {
var ExampleJS= {
Init: function (actionUrl1, actionUrl2, actionUrl3) ExampleJS.LoadWithoutCache(actionUrl1, "div1");
ExampleJS.LoadWithoutCache(actionUrl2, "div2"); ExampleJS.LoadWithoutCache(actionUrl3, "div3"); } }、
/**
* 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;
}
これは IE では特に厄介です。基本的に、サーバーからの応答とともに「キャッシュなし」の HTTP ヘッダーを送信する必要があります。
PHPの場合、必要な情報を提供する次の行をスクリプトに追加します。
header("cache-control: no-cache");
または、クエリ文字列に一意の変数を追加します。
"/portal/?f=searchBilling&x=" + (new Date()).getTime()
タイムスタンプを使用して一意の URL を作成しないでください。アクセスするすべてのページが jquery mobile によって DOM にキャッシュされ、すぐにモバイルでメモリ不足の問題が発生するからです。
$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 がキャッシュするかどうかを判断し、それに応じてキャッシュ パラメータを設定できます。
window.location = ""; は使用しないでください。URL を変更しないと、アドレスに移動し、pagebeforeload は起動しません。この問題を回避するには、単純に window.location.hash = ""; を使用します。
Jquery の .load() メソッドを使用したい場合は、JavaScript タイムスタンプなど、URL に固有のものを追加してください。"+new Date().getTime()". pid 変数を変更しないように、「&time=」を追加する必要があることに注意してください。
$('#searchButton').click(function() {
$('#inquiry').load('/portal/?f=searchBilling&pid=' + $('#query').val()+'&time='+new Date().getTime());
});
jquery ロード関数を、キャッシュが 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);
これを、jquery のロード後に実行されるグローバルな場所に配置すると、すべての設定が完了します。既存のロード コードはキャッシュされなくなります。
このコードはあなたを助けるかもしれません
var sr = $("#Search Result");
sr.load("AJAX-Search.aspx?q=" + $("#q")
.val() + "&rnd=" + String((new Date).getTime())
.replace(/\D/gi, ""));
一部のサーバー (Apache2 など) が「キャッシュ」を明確に許可または拒否するように構成されていない場合、HTTP ヘッダーを「キャッシュなし」に設定しても、サーバーはデフォルトで「キャッシュされた」応答を送信する可能性があることに気付きました。そのため、サーバーが応答を送信する前に何も「キャッシュ」していないことを確認してください。
Apache2 の場合は、
1) 「disk_cache.conf」ファイルを編集します - キャッシュを無効にするには、「CacheDisable /local_files」ディレクティブを追加します
2) mod_cache モジュールをロードします (Ubuntu では「sudo a2enmod cache」および「sudo a2enmod disk_cache」)。
3) Apache2 を再起動します (Ubuntu "sudo service apache2 restart")。
これにより、サーバー側でキャッシュを無効にするトリックが行われるはずです。乾杯！:)
これを試して：
$("#Search_Result").load("AJAX-Search.aspx?q=" + $("#q").val() + "&rnd=" + String((new Date()).getTime()).replace(/\D/gi, ''));
私が使用したときは正常に動作します。