Javascript jquerymobile+；使用ajax加载多页的Phonegap

我有一个包含3个空页面的html文件（AppNotado、AppCompileado和appOriginal）。

我用来自3个外部URL的3个ajax调用填充这些页面。每一页都是根据您的别名填写的。

$（文档）。on（'pagebeforeshow'，“#appAnotado”，函数（）{
var-id=10；
var formData=new formData（）；
$.ajax({
网址：'http://myApp.action?id=“+id+”&visao=anotado'，
键入：“POST”，
数据类型：“html”，
数据：formData，
cache:false，
跨域：是的，
processData:false，
contentType:false，
成功：功能（护墙板）{
$（'#visoes'）.html（jQuery（dados.find（'#visoes'）.html（））；
$（'#divTexto'）.html（jQuery（dados.find（'#divTexto'）.html（））；
},
错误：函数（xhr、textStatus、errorshown）{
日志（“xhr.status:+xhr.status”）；
}
});
$.ajax({
网址：'http://myApp.action?id=“+id+”&visao=compileado”，
键入：“POST”，
数据类型：“html”，
数据：formData，
cache:false，
跨域：是的，
processData:false，
contentType:false，
成功：功能（护墙板）{
$（'#visoesCompilado'）.html（jQuery（dados.find（'#visoes'）.html（））；
$（'divTextoCompilado'）.html（jQuery（dados.find（'divTexto'）.html（））；
},
错误：函数（xhr、textStatus、errorshown）{
日志（“xhr.status:+xhr.status”）；
}
});
$.ajax({
网址：'http://myApp.action?id=“+id+”&visao=原始”，
键入：“POST”，
数据类型：“html”，
数据：formData，
cache:false，
跨域：是的，
processData:false，
contentType:false，
成功：功能（护墙板）{
$（'#visoesOriginal'）.html（jQuery（dados.find（'#visoes'）.html（））；
$（'divTextoOriginal'）.html（jQuery（dados.find（'divTexto'）.html（））；
},
错误：函数（xhr、textStatus、errorshown）{
日志（“xhr.status:+xhr.status”）；
}
});
});

视图（别名）在导航栏中定义。这段代码是由外部URL带来的。

当我运行应用程序时，只显示第一页（这是正确的），但当我单击其他视图（别名）时，会立即显示消息

“错误加载页”

---

我尝试使用属性

rel=“external”

或

data ajax=“false”

发现了这个，但它不起作用。

要在单个文件中链接页面，请在页面id之前添加标签，这样做

奥马尔，感谢您的关注。 我在下面的例子中解决了页面更改的问题

按照Omar的建议，添加了hashtags

“#appAnotado”

：

<div id="visoes" data-role="navbar">
    <ul>
        <li><a id="anotado10" class="ui-btn-active" href="#appAnotado" >Anotado</a></li>
        <li><a id="publicado10" href="#appCompilado" >Compilado</a></li>
        <li><a id="original10" href="#appOriginal" >Original</a></li>
    </ul>
</div>

只有hashtag没有解决这个问题。 我想可能是错误的参数传递破坏了应用程序。通过上面的函数

getParameterByName（name）

问题就解决了

仍然需要修复调用此页面的

listview

：

<ul data-role="listview">
    <li>
        <a href="?id=10#appAnotado" rel="external"></a>
    </li>
</ul>

尽管所有页面都在同一个html文件中，但使用属性

rel=“external”

是最基本的

---

很抱歉，我认为问题只出现在更改页面上。

href=“#appAnotado”

您忘记了所有

href

Omar中的标签，谢谢您的回答。我在所有的“href”中添加了标签，但它不起作用。现在不再出现“错误加载页面”的消息。@leonardo这太奇怪了。尝试JS解决方案，然后在（'click'，函数（e）{e.preventDefault（）；var goTo=$（this.attr（'href'）；$.mobile.changePage（goTo）；）上使用（'click'，函数（e）{e.preventDefault（）；var goTo=$（this.attr（'href'）；$）我添加了一个带有

警报的JS（）

，但他没有被调用。该页面未显示。没有出现错误<代码>$（'#original36048'）。在（'click'，函数（e）{alert（'original36048'）；e.preventDefault（）；var goTo=$（this.attr（'href'）；$.mobile.changePage（goTo）；}）我在您的系统中进行了测试，效果很好。在我的应用程序中还没有。ajax调用可能是造成这种情况的原因？@leonardo如果您将所有页面都放在一个文件（html文件）中，它应该可以正常工作。你到底得到了什么？太好了，你应该把你的答案标记为正确答案，而不是我的：）

<div id="visoes" data-role="navbar">
    <ul>
        <li><a id="anotado10" class="ui-btn-active" href="appAnotado" >Anotado</a></li>
        <li><a id="publicado10" href="appCompilado" >Compilado</a></li>
        <li><a id="original10" href="appOriginal" >Original</a></li>
    </ul>
</div>

<div id="visoes" data-role="navbar">
    <ul>
        <li><a id="anotado10" class="ui-btn-active" href="#appAnotado" >Anotado</a></li>
        <li><a id="publicado10" href="#appCompilado" >Compilado</a></li>
        <li><a id="original10" href="#appOriginal" >Original</a></li>
    </ul>
</div>

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
$(document).on( "pagebeforeshow", "#appAnotado", function( e ) {
    var formData = new FormData();
    $.ajax({
        url :'http://myApp.action?id=' + getParameterByName('id'),
[...]

<ul data-role="listview">
    <li>
        <a href="?id=10#appAnotado" rel="external"></a>
    </li>
</ul>