《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.6 技巧:不使用AJAX而链接至外部页面

简介: 默认情况下,jQuery Mobile会将所有的链接转换成AJAX请求,只要它们指向的文件在同一个域中。然而,可能会有想避免这种行为的情况。比如,你可能在自己的网站的某部分使用了不同的移动端JavaScript框架,在尝试用AJAX加载时产生了冲突。

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章,第9.6节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

9.6 技巧:不使用AJAX而链接至外部页面

默认情况下,jQuery Mobile会将所有的链接转换成AJAX请求,只要它们指向的文件在同一个域中。然而,可能会有想避免这种行为的情况。比如,你可能在自己的网站的某部分使用了不同的移动端JavaScript框架,在尝试用AJAX加载时产生了冲突。代码清单9-7演示了多种在链接上禁用AJAX加载行为的方法。

代码清单9-7 指示不通过AJAX加载而提供外部页面的链接

00 <!DOCTYPE html> 
01 <html> 
02 <head> 
03  <title>Linking Without AJAX</title> 
04  <meta name="viewport" 
05    content="width=device-width, initial-scale=1"> 
06  <link rel="stylesheet" href=
07    "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08  <script type="text/javascript"
09    src="http://code.jquery.com/jquery-1.7.1.min.js">
10  </script>
11  <script type="text/javascript" src=
12    "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13  </script> 
14 </head> 
15 <body> 
16 
17 <div data-role="page">
18 
19  <div data-role="header">
20   <h1>Linking Without AJAX</h1>
21  </div>
22 
23  <div data-role="content"> 
24   <p><a href="04b-link.html" data-ajax="false">Link to an 
25    external file</a></p>  
26   <!-- OR:
27   <p><a href="04b-link.html" rel="external">Link to an 
28    external file</a></p>
29   -->   
30  </div>
31  
32 </div>
33 
34 </body>
35 </html>

在第24行,data-ajax属性用来指定是否使用AJAX。默认值是true。如果设置为false,将会禁用AJAX。

第27行提供了rel="external"属性。在jQuery Mobile中行为是一样的:禁用AJAX。这个标记的依据是HTML的建议标准。然而,使用这个标记会有一些副作用。有些人可能会指定一些CSS规则,给指向外部地址的链接赋予不同的外观。例如,可能会在这些链接上添加一个小图标1。

相关文章
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
188 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
JavaScript 前端开发
vue element-ui分页插件 始终保持在页面底部样式
vue element-ui分页插件 始终保持在页面底部样式
443 0
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
119 1
|
9月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
537 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
125 4
|
11月前
|
JavaScript
超炫酷UI效果的jQuery滑块插件
超炫酷UI效果的jQuery滑块插件
107 0
|
JavaScript
H-ui JQuery 给单选按纽赋值不生效
H-ui JQuery 给单选按纽赋值不生效
102 0
H-ui JQuery 给单选按纽赋值不生效
|
前端开发 JavaScript Java
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
177 1
|
安全 前端开发 数据安全/隐私保护
会员系统03-前台系统UI,利用页面展示大宗农产品价格走势曲线,添加银行卡,前还要进行实名认证,密码密文,隐私安全
会员系统03-前台系统UI,利用页面展示大宗农产品价格走势曲线,添加银行卡,前还要进行实名认证,密码密文,隐私安全