mui封装的ajax请求
由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式;所以笔者觉得有必要将mui封装的ajax请求在这里提一下;
1,mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型;
本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法;
2,mui.ajax()
参数:
url Type: String 请求发送的目标地址
async Type: Boolean 发送同步请求
data {xx:xx,xxx:xxx} 发送到服务器的业务数据
dataType "xml": 返回XML文档,"html": 返回纯文本HTML信息;,"script": 返回纯文本JavaScript代码,"json": 返回JSON数据,"text": 返回纯文本字符串
error 请求失败时触发的回调函数,该函数接收三个参数: (xhr:xhr实例对象,type:错误描述,可取值:"timeout", "error", "abort", "parsererror"、"null",errorThrown:可捕获的异常对象)
success 请求成功时触发的回调函数,该函数接收三个参数:(data:服务器返回的响应数据,类型可以是json对象、xml对象、字符串等;,textStatus:状态描述,默认值为'success', xhr:xhr实例对象)
timeout 请求超时时间(毫秒),默认值为0,表示永不超时;若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调
type 请求方式,目前仅支持'GET'和'POST',默认为'GET'方式
headers 指定HTTP请求的Header;
3,案例:
a.mui.ajax({
url : '${ctx}carReserve/getTravelApplyNo',//请求路径;
type : 'GET',//表示调用get方法请求;
dataType:'json',//表示以json形式接受返回参数
success : function(data){//请求成功,返回函数
alert("ok");
},
error : function(xhr,type,errorThrown){){//请求失败,返回函数
alert("error");
}
});
b.mui.post("${ctx}carReserve/getTravelApplyNo",{},function(data){
var datas=data.rows;
travelApplyNo.value = datas[0].travelApplyNo;
},'json');
})
mui.post:表示调用post方法请求;
"${ctx}carReserve/getTravelApplyNo":请求路径;
{}:大括号里边填写请求参数;
function(data):表示返回函数,data为返回参数;
'json':表示以json形式接受返回参数。
mui.get()、mui.getJSON()和上述原理相同,我就举两个典型的,剩下的大家有兴趣也可以试试!
由于笔者目前水平有限,难免出现错误,还望大家能够指出来,共同提高。
mui封装的ajax请求的更多相关文章
- 封装的ajax请求
在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的 ...
- 简单封装的ajax请求
简单封装了一个ajax请求,做一下统一处理,少写重复代码,只是一个初步的代码,没有经过优化. $.extend({ myAjax: function (option, rollBack) { var ...
- ES6封装原生ajax请求
http (data) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.onrea ...
- spring security:ajax请求的session超时处理
当前端在用ajax请求时,如果没有设置session超时时间并且做跳转到登录界面的处理,那么只是靠后台是很难完成超时的一系列动作的:但是如果后台 没有封装一个ajax请求公共类,那么在ajax请求上下 ...
- 原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- 原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- 学习AJAX必知必会(4)~JQuery发送Ajax请求
一.JQuery发送Ajax请求 ■ 对于get和post请求,jQuery内部封装了Ajax请求的4个步骤和数据格式的设置 ■ 对于Ajax通用请求,jQuery内部封装了Ajax请求的4个步骤和数 ...
- ajax请求的封装
前端的工作,免不了要用到交互,请求后端的数据,可能大多人一直选择用jq封装好的方法直接使用,要知道封装这个事我们自己也可以的,今天给大家介绍一种封装方法,而且连跨域问题都不在话下,有了这个函数,是不是 ...
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
随机推荐
- JAVA学习前十天:小结、面向对象之”扑克牌“例子
2016年4月26号正式步入JAVA学习课堂,学习了第一节JAVA课程,由于以前有C语言基础,所以课程有点快! 第一天:学习了教材的第一部分,第一部分总共两章,分别是JAVA简介和JAVA基础语法. ...
- shell基础之书写需要用到的小工具
一.简单介绍 下面介绍几个可能不太常用但是面试题经常会用用到的小工具: 命令:cut 作用:截取某一个字段 '-d' 后面跟分隔字符,把字段分割为若干个区间. '-c' 后面接的是第几个字符,也可以是 ...
- review40
使用URL创建对象的应用程序称为客户端程序. URL对象调用InputStream openStream()方法可以返回一个输入流,该输入流指向URL对象所包含的资源. InetAddress类可以将 ...
- Python — 多线程与多进程
1.多线程 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位,一个进程可以包含多个线程.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线 ...
- 目标检测 — NMS
1.非极大值抑制步骤 非极大值抑制算法(Non-maximum suppression,NMS)在目标检测中经常用到.我们的检测算法可能对同一目标产生多次检测的结果,非极大值抑制算法可以保证每个目标只 ...
- 使用memcache 心得和注意事项
内存分配机制:首先要说明的是Memcached支持最大的存储对象为1M.它的内存分配比较特殊,但是这样的分配方式其实也是对于性能考虑的,简单的分配机制可以更容易回收再分配,节省对于CPU的使用.这里用 ...
- hdu6237 分解质因子
题意:给一堆石子,每次移动一颗到另一堆,要求最小次数使得,所有石子数gcd>1 题解:枚举所有质因子,然后找次数最小的那一个,统计次数时,我们可以事先记录下每堆石子余质因子 的和,对所有石子取余 ...
- Java 简单图片截取
package cn.byref.demo.image; import java.awt.Rectangle; import java.awt.image.BufferedImage; import ...
- ng-file-upload - samples
<script src="angular.min.js"></script> <!-- shim is needed to support non-H ...
- Rainmeter如何打开控制面板的小程序
控制面板功能都是通过访问cpl文件来关联它们的,假设你的系统盘在C盘,那么它们的本地在C:\Windows\System32\ Rainmeter通过使用这个应用程序C:\Windows\System ...