mui ajax方法
mui ajax方法详解:
mui提供了mui.ajax,在此基础上有分装出mui.get()/mui.getJSON()/mui.post()三个方法。
mui.ajax( url [,settings] )
mui.ajax( url [,settings] ) url
Type: String
请求发送的目标地址 settings
Type: PlainObject
key/value格式的json对象,用来配置ajax请求参数,支持的完整参数参考如下mui.ajax([settings])方法
mui.ajax([settings])
settings
Type: PlainObject
key/value格式的json对象,用来配置ajax请求参数,支持的详细参数如下:
async
Type: Boolean
发送同步请求
crossDomain *5+ only
Type: Boolean
强制使用5+跨域
data
Type: PlainObject||String
发送到服务器的业务数据
dataType
Type: String
预期服务器返回的数据类型;如果不指定,mui将自动根据HTTP包的MIME头信息自动判断;支持设置的dataType可选值:
"xml": 返回XML文档
"html": 返回纯文本HTML信息;
"script": 返回纯文本JavaScript代码
"json": 返回JSON数据
"text": 返回纯文本字符串
error
Type: Functon(XMLHttpRequest xhr,String type,String errorThrown)
请求失败时触发的回调函数,该函数接收三个参数:
xhr:xhr实例对象
type:错误描述,可取值:"timeout", "error", "abort", "parsererror"、"null"
errorThrown:可捕获的异常对象
success
Type: Functon(Anything data,String textStatus,XMLHttpRequest xhr)
请求成功时触发的回调函数,该函数接收三个参数:
data:服务器返回的响应数据,类型可以是json对象、xml对象、字符串等;
textStatus:状态描述,默认值为'success'
xhr:xhr实例对象
timeout
Type: Number
请求超时时间(毫秒),默认值为0,表示永不超时;若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调
type
Type: String
请求方式,目前仅支持'GET'和'POST',默认为'GET'方式
headers
Type: Json
指定HTTP请求的Header
headers:{'Content-Type':'application/json'}
processData
Type: Boolean
为了匹配默认的content-type("application/x-www-form-urlencoded"),
mui默认会将data参数中传入的非字符串类型的数据转变为key1=value&key2=value2格式的查询串;
如果业务需要,希望发送其它格式的数据(比如Document对象),可以设置processData为false
代码示例:如下为通过post方式向某服务器发送鉴权登录的代码片段
mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
headers:{'Content-Type':'application/json'},
success:function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
mui.post()方法是对mui.ajax()的一个简化方法,直接使用POST请求方式向服务器发送数据、且不处理timeout和异常(若需处理异常及超时,请使用mui.ajax()方法),使用方法: mui.post(url[,data][,success][,dataType]),如上登录鉴权代码换成mui.post()后,代码更为简洁,如下:
mui.post('http://server-name/login.php',{
username:'username',
password:'password'
},function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},'json'
);
mui.get()方法和mui.post()方法类似,只不过是直接使用GET请求方式向服务器发送数据、且不处理timeout和异常(若需处理异常及超时,请使用mui.ajax()方法),使用方法: mui.get(url[,data][,success][,dataType]),如下为获得某服务器新闻列表的代码片段,服务器以json格式返回数据列表
mui.get('http://server-name/list.php',{category:'news'},function(data){
//获得服务器响应
...
},'json'
);
如上mui.get()方法和如下mui.ajax()方法效果是一致的:
mui.ajax('http://server-name/list.php',{
data:{
category:'news'
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
success:function(data){
//获得服务器响应
...
}
});
mui.getJSON()方法是在mui.get()方法基础上的更进一步简化,限定返回json格式的数据,其它参数和mui.get()方法一致,使用方法: mui.get(url[,data][,success]),如上获得新闻列表的代码换成mui.getJSON()方法后,更为简洁,如下:
mui.getJSON('http://server-name/list.php',{category:'news'},function(data){
//获得服务器响应
...
}
);
以上内容获取为文档,详情请阅读文档。
http://dev.dcloud.net.cn/mui/ajax/
小结:
<script type="text/javascript">
mui.init();
// plus加载完毕
mui.plusReady(function(){
document.getElementById('btn').addEventListener('tap',function(){
// mui.ajax GET方法
mui.ajax({
type: 'GET',
url: 'http://demo.hcoder.net/index.php',
success: function(msg){
mui.toast(msg);
},
error: function(xhr, type, errorThrown){
// xhr:xhr实例对象 type:错误描述 errorThrown:可捕获的异常对象
mui.toast(type);
}
}); // mui.ajax POST方法
mui.ajax({
type: 'POST',
data: {'name':'hcoder', 'age': 18},
dataType: 'json',
url: 'http://demo.hcoder.net/index.php',
success: function(msg){
mui.toast(JSON.stringify(msg));
},
error: function(xhr, type, errorThrown){
mui.toast(type);
}
}); // mui.post方法 传入的是参数而不再是对象
mui.post(
'json',
'http://demo.hcoder.net/index.php',
{'name':'hcoder', 'age': 18},
function(msg){
console.log(JSON.stringify(msg));\
mui.toast(msg.name);
}
); // mui.get方法 没有data元素
mui.get(
'json',
'http://demo.hcoder.net/index.php',
function(msg){
console.log(JSON.stringify(msg));
}
); // mui.getJSON方法
mui.getJSON(
"http://demo.hcoder.net/index.php",
function(msg){
console.log(JSON.stringify(msg));
mui.toast(msg.name);
}
);
});
});
</script>
mui ajax方法的更多相关文章
- Mui --- app与服务器之间的交互原理、mui ajax使用
1.APP与服务器之间的交互原理 app端(客户端)与服务端的交互其实理解起来和容易,客户端想服务器端发送请求,服务器端进行数据运算后返回最终结果.结果可以是多种格式: 1.text 文本格式 2.x ...
- mui初级入门教程(三)— html5+ XMLHttpRequest 与mui ajax用法详解
文章来源:小青年原创发布时间:2016-05-29关键词:mui,html5+,XMLHttpRequest,ajax,懒加载转载需标注本文原始地址: http://zhaomenghuan.gith ...
- Hbuilder app开发,使用mui.ajax和服务器交互,后台获取不到值,显示null的解决方法
先上一个能用的js代码: function login() { var uname=document.getElementById("username").value.trim() ...
- mui ajax 应用的跨域问题
1.首先在mui.ajax的error函数里出现: “syntaxerror unexpected token <” 这样的错误,那么在 mui.ajax中的type写成 JSONP ,后台需 ...
- mui ajax
<!doctype html><html> <head> <meta charset="UTF-8"> <title>直 ...
- $.ajax()方法详解
jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...
- Mui.ajax请求服务器正确返回json数据格式
ajax: mui.ajax('http://server-name/login.php',{ data:{ username:'username', password:'password' }, d ...
- 重写jquery的ajax方法
//首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...
- ajax方法总结
ajax方法总结 1.原生ajax get请求和post请求区别:黄色小三角 以get请求为例,输出结果如下: 2.jquery中的ajax 列了常用的6个方法: 3.状态说明 readystate: ...
随机推荐
- 树链剖分【CF165D】Beard Graph
Description 给定一棵树,有m次操作. 1 x 把第x条边染成黑色 2 x 把第x条边染成白色 3 x y 查询x~y之间的黑边数,存在白边输出-1 Input 第1行为一个整数\(n\), ...
- 浮生半日:探究Python字节码
好吧!“人生苦短,请用Python”,作为python爱好者以及安全从业者,而且最近也碰到了一些这方面的问题,懂点python字节码还是很有必要的. Python是一门解释性语言,它的具体工作流程如下 ...
- Linux基础系列-Day6
Samba服务(基于CentOS 7.0) Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成,Samba主要用于Linux或UNIX和Windows系统之 ...
- luogu P1220 关路灯
题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏一盏地关掉这些路灯. 为了给村 ...
- 【BFS】Tester Program
[poj1024]Tester Program Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 2760 Accepted ...
- BZOJ 4327 JSOI2012 玄武密码(后缀自动机)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4327 [题目大意] 求每个子串在母串中的最长匹配 [题解] 对母串建立后缀自动机,用每 ...
- BZOJ 3790 神奇项链(manacher+DP+树状数组)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3790 [题目大意] 问最少用几个回文串可以构成给出串,重叠部分可以合并 [题解] 我们 ...
- Codeforces 804D Expected diameter of a tree(树形DP+期望)
[题目链接] http://codeforces.com/contest/804/problem/D [题目大意] 给你一个森林,每次询问给出u,v, 从u所在连通块中随机选出一个点与v所在连通块中随 ...
- JS解决URL传递参数中文乱码问题
function getUrlParam(name){ // 用该属性获取页面 URL 地址从问号 (?) 开始的 URL(查询部分) var url = window.location.search ...
- QS世界大学排名_百度百科
QS世界大学排名_百度百科 莱斯特大学