PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HBuilderX教程 > 正文

    HBuilder mui ajax

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型;...
    mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型; 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。

    mui.ajax()方法通过HTTP请求加载远程数据,是mui框架底层Ajax的实现方法,使用方法:mui.ajax(url[,setting]),其中url表示请求发送的目标地址,setting是一个json对象,支持的参数主要包括:

    参数 类型 描述
    data Object 发送到服务器的数据,可以是json对象或字符串
    dataType String 预期服务器返回的数据类型;如果不指定,mui将自动根据HTTP包的MIME头信息自动判断;支持设置的dataType可选值:
    • "xml": 返回XML文档
    • "html": 返回纯文本HTML信息;
    • "script": 返回纯文本JavaScript代码
    • "json": 返回JSON数据
    • "text": 返回纯文本字符串
    error Function 请求失败时触发的函数,该函数接收三个参数:
    • xhr:xhr实例对象,类型是XMLHttpRequest
    • type:错误描述,类型是String,可取值除了'null'外,其它可能值:"timeout", "error", "abort", "parsererror"
    • errorThrown:可捕获的异常对象,类型是String
    success Function 请求成功时触发的回调函数,该函数接收三个参数:
    • data:服务器返回的响应数据,类型可以是json对象、xml对象、字符串等;
    • textStatus:状态描述,参数类型是String,默认值为'success'
    • xhr:xhr实例对象,类型是XMLHttpRequest
    timeout Number 请求超时时间(毫秒),默认值为0,表示永不超时;若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调
    type String 请求方式,目前仅支持'GET'和'POST',默认为'GET'方式

    代码示例:如下为通过post方式向某服务器发送鉴权登录的代码片段

    mui.ajax('http://server-name/login.php',{
    	data:{
    		username:'username',
    		password:'password'
    	},
    	dataType:'json',//服务器返回json格式数据
    	type:'post',//HTTP请求类型
    	timeout:10000,//超时时间设置为10秒;
    	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){
    		//获得服务器响应
    		...
    	}
    );

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-146-2390-1.html
    相关热词搜索: