“数据-url” jQuery Mobile 令人困惑
任何人都可以对 jQuery Mobile 中的“data-url”属性进行更多了解，目前我阅读了 文档 我发现它太令人困惑了，是否有任何可用的演示或其他东西。
请避免复制粘贴 jQuery 移动网站的内容，它绝对有帮助 有人像我一样在同样的困惑状态中寻找同样的东西。
Can Anyone put more some light on "data-url" attributes in jQuery Mobile currently I read the documentation I found it too confusing does any has a working demo or something.
Please avoid Copy pasting the the content from jQuery mobile website it can definitely help
some one else looking out for same in same state of confuse like I am .
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您正在查看文档的一个相当旧的链接。最新版本的文档提供了有关 data-url 属性用途的更多信息。您可以通过以下链接在相关页面上查看新的 1.0 版本： http://jquerymobile.com/demos/1.0/docs/pages/page-navmodel.html
我真的很诚实地相信文档，尤其是 1.0 文档，会更好地解释这一点，但是无论如何，我会尝试：为了真正理解 data-url 属性，您需要了解 jQuery Mobile 模型，该模型将所有 HTML 页面组合成移动网站的单个 HTML 文档。这些页面通常会延迟加载到同一文档中。当您导航到页面上加载了 jQuery Mobile 的 HTML 文档时，将解析 HTML，并且仅显示一个“页面”。
data-url 是您放置在 jQM 页面上以启用 Ajax 导航的属性。当您单击链接时，jQM 导航将首先在页面上查找匹配的 data-url 属性。例如，如果您浏览到 URL 为“example-host/some/path#/features/123”的启用 jQM 的页面，jQuery Mobile 将首先在当前文档中查找具有属性
data-url="/features/123"。如果找到，则会隐藏当前的 jQM 页面并显示找到的页面。如果没有找到，它会尝试向 URL“example-host/features/123”发出 Ajax 请求，如果找到有效页面，则将内容加载到另一个 jQM 页面中。这些 jQM 文档链接应该提供进一步的帮助：
页面剖析
jQM 页面模型
You are looking at a rather old link of the documentation. The latest version of the documentation has more information about the purpose of the data-url attribute. You can check out the new 1.0 version on the relevant page at the following link: http://jquerymobile.com/demos/1.0/docs/pages/page-navmodel.html
I really honestly believe that the documentation, especially the 1.0 documentation, will explain this better, but I will attempt anyway: In order to really understand the data-url attribute, you need to understand the jQuery Mobile model of combining all of your HTML pages into a single HTML document for your mobile website. These pages are generally loaded lazily into the same document. When you navigate to the HTML document with jQuery Mobile loaded on the page, the HTML will be parsed, and only one "page" will be displayed.
The data-url is an attribute that you put on a jQM page in order to enable Ajax navigation. When you click on a link, the jQM navigation will first look for a matching data-url attribute on a page. For instance, if you browse to jQM-enabled page that has a URL of "example-host/some/path#/features/123", jQuery Mobile will first look on the current document for a jQM page that has the attribute
data-url="/features/123". If it finds it, then it hides the current jQM page and displays the one it found. If it doesn't find it, then it attempts an Ajax request to the URL "example-host/features/123", loading the contents in as yet another jQM page if it finds a valid page.These jQM documentation links should provide further help:
Anatomy of a Page
jQM Page Model
data-url还有一个非常重要的用例 - 这是在重定向期间：假设用户导航到
/store/youraccount但他们尚未登录。您的服务器可能会将它们重定向到登录页面
/store/login。这会以 301 重定向的形式返回到浏览器，而 jQuery Mobile 甚至不知道该更改即可加载该重定向。页面将正确显示，但顶部的 URL 仍为store/youraccount。通过像这样在登录页面上设置
data-url，jQuery Mobile 可以在重定向后正确更新 URL，这意味着它可以被添加书签和data-url如何阻止如果您的页面包含未定义
操作的所以当您输入
data-url='/store/login它可以正确更新URL。注意：即使您的表单有
action，您仍然需要设置 data-url。这只是一个例子，展示了省略 data-url 会如何破坏事情。There's an additional very important use-case for
data-url- which is during redirects :Let's say a user navigates to
/store/youraccountbut they're not logged in.Your server will probably redirect them to a login page
/store/login. This comes back to the browser as a 301 redirect which is loaded without jQuery Mobile even knowing about the change. The page will display correctly but the URL at the top will still bestore/youraccount.By setting
data-urlon the login page like this, jQuery mobile can correctly update the URL after a redirect which means it can be bookmarked and<form>tags withoutactionspecified will work.How
data-urlstops<form>from breakings:If your page contains a
<form>tag defined without anactionattribute then the default behavior is to post back to the current page - yup you guessed it the browser still thinks we're on/store/youraccountSo when you put
data-url='/store/loginit can correctly update the URL.Note: even if your form has an
actionyou will still need to set data-url. THis is just an example to show how leaving off data-url can break things.