在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

回答

相关问题