在iPad上離線使用jQuery ajax

我正在編寫一個網站，詢問使用jQuery Ajax從JSON文件加載的一系列問題。用戶運行一系列問題，直到達到需要加載新JSON文件的答案。從計算器用戶以前的一些幫助後，AJAX功能是：在iPad上離線使用jQuery ajax

function loadJSON(currentkey) 
{ 

    keytoload = "json/" + currentkey + ".json"; 
    $.ajax({ 
     url: keytoload, 
     dataType: "json", 
     async: true, 


     error: function (request,error) { 
             alert('Error has occurred please try again!') 
             }, 
     success: function (keyloaded) { 
             dataset = keyloaded; 
             askQ();//calls a function to ask a new question 
             } 
    });   
}

我希望能夠在iPad上運行，而不使用「脫機頁的」網絡連接。如果我連接到互聯網，它的功能很好。如果我嘗試脫機閱讀頁面，則失敗。當我加載頁面時，一切都很好，但是當第二次調用該函數時，它會失敗。我得到的例外是'中止'。它似乎可以在各種瀏覽器上正常工作，也可以在PC上作爲本地副本離線使用。我曾嘗試中止先前的Ajax調用，以防這些繼續進行，但這不起作用。

任何想法？

來源

2016-03-04 GilesJ

完全披露：我是Offline Pages Pro應用程序的開發者。

這聽起來像json文件沒有預先緩存，因此任何試圖在離線時獲取它們都會失敗。

這可能是因爲代碼的組織方式。離線頁面不可能通過多個函數調用推導出所有可能的currentKey變量值。爲了解決這個問題，您需要採取主動行動，並確保通過向您的網站添加特殊標記來預先緩存json文檔。

以下是您在離線頁面中如何使用它的方法。

首先，您需要創建一個XML文檔（例如offline.xml）來聲明您的Ajax請求。將文檔存儲在您網站的任何地方。選擇以下任何選項來聲明Ajax請求。確保用您的實際主機名替換yourdomain.com。

OPTION 1 - 明確列出您的JSON文件，按照各自的<addResource>元素：

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE rules PUBLIC "-//CODIUMLABS//DTD RULES 1.0//EN" "http://codiumlabs.com/dtd/rules-1.0.dtd"> 
<rules domain="yourdomain.com"> 
    <rule> 
     <addResource uri="json/key1.json" type="text/json" ajax="true" /> 
     <addResource uri="json/key2.json" type="text/json" ajax="true" /> 
     <addResource uri="json/key3.json" type="text/json" ajax="true" /> 
    </rule> 
</rules>

OPTION 2 - 使用序列號只命名json/key1.json，json/key2.json等這樣你需要一個<addResource>元件：

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE rules PUBLIC "-//CODIUMLABS//DTD RULES 1.0//EN" "http://codiumlabs.com/dtd/rules-1.0.dtd"> 
<rules domain="yourdomain.com"> 
    <rule> 
     <addResource uri="json/key{1-20}.json" type="text/json" ajax="true" /> 
    </rule> 
</rules>

OPTION 3 - 使用存儲在data-key屬性的<div>元素中的鍵值。這可能是最好的選擇。如果您還沒有，請將您的密鑰置於數據屬性中，例如：<div data-key="key1"></div>。

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE rules PUBLIC "-//CODIUMLABS//DTD RULES 1.0//EN" "http://codiumlabs.com/dtd/rules-1.0.dtd"> 
<rules domain="yourdomain.com"> 
    <rule> 
     <addResource uri="json/{div[data-key]}.json" type="text/json" ajax="true" /> 
    </rule> 
</rules>

最後，在你的頁面代碼的引用添加到您的offline.xml的<head>的元素：

<link rel="offlinepages-rules" type="application/vnd.offlinepages.rules+xml" href="offline.xml" />

如果你正確地實現上述變化，離線頁面將檢測<link>元素，下載offline.xml，並使用你的Ajax聲明來預先緩存所有的json文件。

來源

2016-03-05 18:59:13

感謝您的回覆。我發現離線頁面是一個非常有用的工具。但在我的情況下，我已經解決了這個問題，其中包括文件名中的空格。當你意識到的時候真的很簡單，但花了我很多時間去了解這一點！ – GilesJ

在iPad上離線使用jQuery ajax

回答

相關問題