Framework7中DOM7库Ajax、Get、Post数据请求例子
1，Ajax请求
发送 Ajax 请求的代码格式如下：
$$.ajax(parameters)
方法里参数可选值如下：
使用样例：
$$(document).on('ajaxComplete', function (e) {
var xhr = e.detail.xhr;
console.log('request performed');
});
3，Get请求
虽然 Ajax 方法功能强大。但通常在项目中我们会更经常使用 Get 或 Post 方法，毕竟用起来方便很多。
Dom7.get 方法样例如下：
$$.get('blog-post.php', {foo:'bar', id:5}, function (data) {
$$('.articles').html(data);
console.log('Load was performed');
});
4，Post请求
Dom7.post 方法样例如下：
$$.post('auth.php', {username:'foo', password: 'bar'}, function (data) {
$$('.login').html(data);
console.log('Load was performed');
});
5，异步获取JSON数据
使用 Dom7.getJSON 我们可以通过 ajax 的方式获取服务器上的 json 数据，并自动转换成对象。使用样例如下：
$$.getJSON('items.json', function (data) {
console.log(data);
});
1，问题描述
最近在使用 Framework7 开发跨平台的H5应用。当使用搜索栏（searchBar）的时候，在 iOS 系统中显示是正常的。
但在 Android 系统下，搜索框前面的放大镜图标却消失不见了。
2，页面代码
<!DOCTYPE html>
<html>
<head>
<!-- meta标签设置-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- app标题 -->
<title>hangge.com</title>
<!-- 使用iOS CSS主题样式-->
<link rel="stylesheet" href="css/framework7.ios.min.css">
<!-- iOS related颜色样式 -->
<link rel="stylesheet" href="css/framework7.ios.colors.min.css">
<!-- 自定义样式-->
<link rel="stylesheet" href="css/my-app.css">
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- 所有的Views视图 -->
<div class="views">
<!-- 主视图（需要有"view-main"样式） -->
<div class="view view-main">
<!-- 顶部导航栏 -->
<div class="navbar">
<div class="navbar-inner">
<!-- 标题元素（为了让页面切换时标题文字有滑动效果，添加sliding样式） -->
<div class="center sliding">hangge.com</div>
</div>
</div>
<!-- 页面容器（Pages container）由于我们使用了固定位置的navbar和toolbar，
所以这里添加额外样式（navbar-through和toolbar-through）-->
<div class="pages navbar-through toolbar-through">
<!-- 首页, "data-page" 里设置页面名字 -->
<div data-page="index" class="page">
<!-- 搜索栏（使用"searchbar-init"样式自动初始化） -->
<form class="searchbar searchbar-init"
data-search-list=".list-block-search" data-search-in=".item-title"
data-found=".searchbar-found" data-not-found=".searchbar-not-found">
<div class="searchbar-input">
<input type="search" placeholder="搜索...">
<a href="#" class="searchbar-clear"></a>
</div>
<a href="#" class="searchbar-cancel">取消</a>
</form>
<div class="searchbar-overlay"></div>
<div class="page-content">
<div class="content-block searchbar-not-found">
没有查询结果!
</div>
<div class="list-block list-block-search searchbar-found">
<ul>
... 查询结果列表 ...
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Framework7框架的js-->
<script type="text/javascript" src="js/framework7.min.js"></script>
<!-- 你的应用的js -->
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>
3，问题解决办法
由于我使用的是 iOS 皮肤样式（framework7.ios.min.css），这里面定义的 .searchbar input[type="search"] 的 background-image 在 Android 下是显示不了的。
我们可以把 meterial 皮肤样式（framework7.material.css）中的相关样式提取出来覆盖默认样式即可。
比如本样例页面使用的自定义css文件是 my-app.css ，在里面添加如下样式：
/** 搜索栏输入框图标样式覆盖 **/
.searchbar input[type="search"] {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23939398'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E");
-webkit-background-size: 17px 17px;
background-size: 17px 17px;
}
（注意：background-image 中我把图标颜色改成 939398，同提示文字一样的浅灰色。原来 meterial 皮肤里定义的是 FFFFFF 白色）
4，测试运行
再次使用安卓手机测试，可以发现放大镜图标正常显示出来了。
当然使用 iOS 手机也是没问题的。
下面我们来看一篇关于Framework7中页面缓存的一个配置了，希望文章能够让各位理解到Framework7 页面缓存设置吧。
Framework7 是使用 ajax 加载新页面的。所以为了效率，其默认是开启缓存的（同一个请求页面默认缓存时间是十分钟）。对于页面缓存相关配置，我们可以在初始化应用的时候进行设置。而如果我们用 Framework7 开发移动App 时，由于页面都打包到本地，完全可以把缓存关闭。
1，设置样例
Framework7 初始化的时候可以传入相关的配置对象。
// 初始化 app
var myApp = new Framework7({
cache: true,
cacheDuration: 1000*60*10,
cacheIgnore: [],
cacheIgnoreGetParameters: false
});
2，参数说明
（1）cache：是否打开 Ajax 缓存。最好启用Ajax缓存，特别是你的页面内容不经常更新的时候。（默认值：true）
（2）cacheDuration：Ajax 缓存时间，在缓存有效期内加载页面不会发起新的ajax请求而是直接使用缓存的结果。（默认是 10 分钟）
（3）cacheIgnore：不希望被缓存的URL，这是一个字符串数组。（默认为空数组）
（4）cacheIgnoreGetParameters：缓存是否忽略get参数，如果为 "true"，那么像 "about.html?id=2" 和 "about.html?id=3" 将会和 "about.html" 是一样的缓存。（默认值：false）
Framework7 提供了许多常用的模态框（Modal）如：告警框（Alert）、确认框（Confirm）、需要用户输入的提示框（Prompt）等等。默认情况下，这些弹出框的标题是“Framework7”，而确认按钮、取消按钮、登录框的提示文字等都是英文的。
比如：我在页面上弹出一个确认框。
myApp.confirm('是否开始查询?', function () {
//开始查询
});
默认效果图如下：
1，修改默认文字
在 Framework7 初始化的时候传入相关的配置对象即可。
// 初始化 app
var myApp = new Framework7({
modalTitle: "hangge.com提示",
modalButtonOk: "确定",
modalButtonCancel: "取消",
modalPreloaderTitle: "加载中...",
modalUsernamePlaceholder: "用户名",
modalPasswordPlaceholder: "密码"
});
2，参数说明
（1）modalTitle：模态框默认标题（默认值：Framework7）
（2）modalButtonOk：确认按钮文字（默认值：OK）
（3）modalButtonCancel：取消按钮文字（默认值：Cancel）
（4）modalPreloaderTitle：预加载模态框文字（默认值：Loading...）
（5）modalUsernamePlaceholder：登录模态框里用户名占位提示文字（默认值：Username）
（6）modalPasswordPlaceholder：登录模态框里密码占位提示文字（默认值：Password）
3，修改后效果图
下面我们来看一篇关于Framework7 加载指示符（Preloader）使用说明，希望这篇文章能够帮助到各位理解到Framework7 加载指示符哦。
Framework 7 提供了一个好用的加载指示符（Preloader），一个不断旋转的菊花状环形进度条。当我们页面需要加载数据，或者执行比较费时的操作时可以使用。
而且这个加载指示符是使用 SVG 绘制，并使用 CSS 来进行动画，所以可以很方便的改变它的大小。
1，加载指示符的使用
<span class="preloader"></span>
2，修改加载指示符的大小和颜色
（1）加载指示符有2个颜色供选择：其中一个颜色是配合亮色背景（默认样式），另一个颜色配合暗色背景。
（2）要改变大小，只要直接设置 width、height 样式属性即可。
<body>
...
<div class="page-content">
<div class="content-block row">
<!-- 默认样式的加载指示符 -->
<div class="col-25">
Default<br>
<span class="preloader"></span>
</div>
<!-- 白色的加载指示符（适用于深色背景） -->
<div class="col-25 col-dark">
White<br>
<span class="preloader preloader-white"></span>
</div>
<!-- 修改加载指示符尺寸（改成42px*42px） -->
<div class="col-25">
Big<br>
<span style="width:42px; height:42px" class="preloader"></span>
</div>
<!-- 修改尺寸以及颜色（适用于深色背景） -->
<div class="col-25 col-dark">
White<br>
<span style="width:42px; height:42px" class="preloader preloader-white"></span>
</div>
</div>
</div>
...
<style>
.col-25 {
padding:5px;
text-align:center;
}
.col-dark {
background:#222;
}
</style>
</body>
3，使用模态的方式显示加载指示符
上面的样例是直接将加载指示符放置在页面上。我们也可以通过 js 将其通过模态的方式自动显示在页面上。（既然是模态的，说明在加载指示符显示的时候我们是不可以进行任何操作的。）
比如我们可以在加载数据的时候将其弹出显示，告知用户当前正在加载。当加载完毕后自动将其关闭。
（1）样例效果图
点击链接后，在页面中央显示加载指示符。过个两秒，加载指示符自动消失。
原文:Framework7 - 加载指示符（Preloader）使用说明
（2）html页面代码
<body>
...
<div class="page-content">
<div class="content-block">
<p><a href="#" class="open-indicator">显示Indicator</a></p>
</div>
</div>
...
</body>
（3）js代码
$$('.open-indicator').on('click', function () {
myApp.showIndicator();
setTimeout(function () {
myApp.hideIndicator();
}, 2000);
});
4，Ajax请求时自动显示加载提示符
App 中如果有很多页面都有数据请求，要是每个请求都像上面一样都要手动添加代码显示、隐藏加载提示符。会略显麻烦。
我们可以在 Framework7 初始化的时候对 Ajax 请求进行拦截，进行统一处理。即发起请求时显示加载提示符，请求完毕后隐藏加载提示符。
// 初始化 app
var myApp = new Framework7({
// ajax请求开始
onAjaxStart: function (xhr) {
myApp.showIndicator();
},
// ajax请求完毕
onAjaxComplete: function (xhr) {
myApp.hideIndicator();
}
});
相关文章
- 安装curl扩展支持https是非常的重要现在许多的网站都使用了https了，下面我们来看一篇关于PHP安装curl扩展支持https例子吧。 问题： 线上运行的lamp服务器，默认yu...2016-11-25
- floor会产生小数了如果我们不希望有小数我们是可以去除小数点的了，下面一聚教程小编来为各位介绍php使用floor去掉小数点的例子，希望对各位有帮助。 float floor (...2016-11-25
Framework7 修改模态框默认文字（标题、确认|取消按钮、登录框提示）
下面我们来看一篇关于Framework7 修改模态框默认文字（标题、确认|取消按钮、登录框提示） 的例子，希望这篇文章能够帮助到大家的哦。 Framework7 提供了许多常用的模...2016-10-02Windows Server 2012 R2或2016无法安装.NET Framework 3.5.1的解决方法
这篇文章主要为大家详细介绍了Windows Server 2012 R2或2016无法安装.NET Framework 3.5.1，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-07-06Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
这篇文章主要介绍了Zend Framework动作助手(Zend_Controller_Action_Helper)用法,详细分析了动作助手Zend_Controller_Action_Helper功能,定义,使用方法与相关实现代码,需要的朋友可以参考下...2016-03-10- 下面我们来看一篇关于纯Css实现下拉菜单的简单例子,希望这篇文章能够给各位同学带来帮助,具体步骤如下. 大家可能会经常用到hover这属性，用hover实现鼠标经过的颜...2017-01-22
- 这篇文章主要介绍了C#修改IIS站点framework版本号的方法,涉及C#调用使用ASP.NET IIS注册工具Aspnet_regiis.exe进行IIS站点framework版本号修改的方法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
Zend Framework动作助手Redirector用法实例详解
这篇文章主要介绍了Zend Framework动作助手Redirector用法,结合实例形式详细分析了转向器Redirector的功能,使用方法与相关注意事项,需要的朋友可以参考下...2016-03-10- 在php中日期对比用得比较多了，还有一个日期加减也用到不少，下面我拿两个例子来给大家介绍在php中日期操作方法吧，希望文章能给你带来帮助 功能需求 文章发布时段操...2016-11-25
- 本例子不是读取Excel或生成新的Excel，而是读取现有的Excel文件，然后修改Excel中的数据,就像修改mysql中数据一样的哦。 代码如下 ...2016-11-25
- 正则提取图片中的地址我们介绍过很多的相关文章了，下面再来给各位介绍一个可以提取内容中第一张图片的例子，希望对各位有帮助。 代码如下 复制代码 ...2016-11-25
- 最近看到博客留言的头像有点别扭，因为游客的头像都是同一个头像，看着不是很舒服。虽然现在绝大多数的主题集成了Gavatar头像功能，先不说gavatar被墙的问题，我自己现在都没...2016-11-25
无法启动.NET Framework NGEN v4.0.30319_X86服务的解决方法
这篇文章主要介绍了无法启动.NET Framework NGEN v4.0.30319_X86服务,需要的朋友可以参考下...2016-01-27在Framework 4.0中:找出新增的方法与新增的类(一)
经常看到有同学在讨论Framework 4 的新特性，新方法，于是想写个程序找出framework4.0中新增的方法和类...2020-06-25- 这篇文章主要介绍了Zend Framework动作助手Json用法,结合实例形式分析了Zend Framework动作助手Json的功能与相关使用技巧,需要的朋友可以参考下...2016-03-10
- php判断字符串是否包含另一个字符串的实现方法有许多的办法，像我们在网上一搜索可看到大量关于字符是否包含指定字符的方法，下面我把这些实用的例子整理一起与大家分享...2016-11-25
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
这篇文章主要介绍了Zend Framework教程之请求对象的封装Zend_Controller_Request用法,结合实例形式详细分析了请求对象封装的原理,使用方法与相关注意事项,需要的朋友可以参考下...2016-03-10- date函数是php中一个非常好用的日期获取函数了，我们可以使用它来获取指定日期或者当前日期了，下面我来简单的介绍一下date函数用法与常用用法吧。 PHP星期几获取代...2016-11-25
Zend Framework教程之配置文件application.ini解析
这篇文章主要介绍了Zend Framework教程之配置文件application.ini用法,分析了配置文件application.ini中常见的配置项含义及用法,需要的朋友可以参考下...2016-03-12- 这篇文章主要为大家详细介绍了基于Entity Framework自定义分页效果，增删改的通用实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22