ajax导航在jQuery mobile上的工作原理_Ajax_Url_Jquery Mobile

ajax导航在jQuery mobile上的工作原理

ajax url jquery-mobile

ajax导航在jQuery mobile上的工作原理,ajax,url,jquery-mobile,Ajax,Url,Jquery Mobile,对于那些了解jQuery mobile核心工作原理的人，我有一个可能是noob的问题：）我在一些网站上看到类似ajax的导航，但加载后URL完全改变（我的意思是，最后没有哈希）例如： =>点击任何链接，你会看到一个加载器，在一点动画之后，新页面被加载；但是URL没有散列，它是一个真正的新URL 在第一次加载ajax之后，页面真的完全重新加载了吗我不知道这个魔法是如何在他们的框架上实现的谢谢；） -- Damien这是一个相当简单的实现页面更改应通过changePage功能（jQuery

对于那些了解jQuery mobile核心工作原理的人，我有一个可能是noob的问题：）

我在一些网站上看到类似ajax的导航，但加载后URL完全改变（我的意思是，最后没有哈希）

例如：

=>点击任何链接，你会看到一个加载器，在一点动画之后，新页面被加载；但是URL没有散列，它是一个真正的新URL

在第一次加载ajax之后，页面真的完全重新加载了吗

我不知道这个魔法是如何在他们的框架上实现的

谢谢；）

Damien这是一个相当简单的实现

页面更改应通过changePage功能（jQuery Mobile 1.4及以下版本）或pageContainer更改（jQuery Mobile 1.4及以上版本）进行编程处理

解决方案：您需要的是changeHash设置为false

例子： index.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
        <script>
        $(document).on('pagebeforeshow', '#index', function(){ 
            $(document).on('click', '#open-page', function(){ 
                alert('sdfsd');
                $.mobile.changePage("second.html", { transition: "slideup", changeHash: false });
            });
        });
        </script>
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a class="ui-btn-right" id="open-page">Next</a>
            </div>

            <div data-role="content">

            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div>  
    </body>
</html>

<div data-role="page" id="second" data-theme="a" >
    <div data-role="header">
        <h3>
            Second Page
        </h3>
        <a href="#index" class="ui-btn-left">Back</a>
    </div>

    <div data-role="content">

    </div>

    <div data-role="footer" data-position="fixed">

    </div>
</div>


jQM复杂演示
$（document）.on（'pagebeforeshow'，'#index'，function（）{
$（文档）。在（'单击'，'打开页面'，函数（）{
警报（“sdfsd”）；
$.mobile.changePage（“second.html”，{transition:“slideup”，changeHash:false}）；
});
});
首页

更新：您需要的信息与jQuery Mobile无关

我向您展示了jquerymobile实际上可以做到的一个解决方案。但此解决方案将永久显示原始HTML文件名。这是因为初始HTML页面被加载到DOM中，而其他每个页面都被加载到DOM中。因此jquerymobile可以完全控制链接名

但这并不是上面提到的页面所使用的。它使用某种重写引擎。默认情况下，重写引擎将URL映射到文件系统路径。但是，它也可以用于将一个URL重定向到另一个URL（在这里完成），或者调用内部代理获取。他们可能正在使用打开mod_rewrite模块的Apache web服务器。

我的问题不是“如何使用”，而是“如何工作”：/我会关注“changePage”功能谢谢更新：）我明白你的意思。但这并不是我真正想要的。我知道在我提供的链接上有一个URL重写。问题是：jquerymobile如何发挥魔力，重定向到另一个页面并更改浏览器上的URL，而不使用任何“sharp”（散列），而是使用类似ajax（ajah？）的方法。我的意思是，ajax加载意味着浏览器nav'中的静态URL或变量散列。这里没有任何散列，URL已完全更改，但我们可以看到一个预加载，在重定向时没有“空白页”。。。

<div data-role="page" id="second" data-theme="a" >
    <div data-role="header">
        <h3>
            Second Page
        </h3>
        <a href="#index" class="ui-btn-left">Back</a>
    </div>

    <div data-role="content">

    </div>

    <div data-role="footer" data-position="fixed">

    </div>
</div>