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()和上述原理相同，我就举两个典型的，剩下的大家有兴趣也可以试试！

由于笔者目前水平有限，难免出现错误，还望大家能够指出来，共同提高。

转载于:https://www.cnblogs.com/lidelin/p/7008876.html

mui封装的ajax请求相关推荐

ajax请求封装,封装的ajax请求
在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的 ...
利用JS面向对象+模块化封装集AJAX请求、基本数据校验、URL参数截取等功能于一身的通用工具模块
以下为封装好的工具类代码,使用方法将在后边介绍. /*** Created by xiaoqiang on 2017/11/09.*/ 'use strict'; import $ from 'jqu ...
理解ajax技术，封装原生 ajax请求
一.Ajax 概述 Ajax 是 Asynchronous Javascript And XML 的简写 Ajax是一门技术,并不是一门语言使用XHTML+CSS来标准化呈现使用XML和XSLT进 ...
jquery封装的ajax请求
属性名称解释 url 请求的服务器端url地址 async (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false data 发送到服务器的数据, ...
ES6新特性_Promise封装Ajax请求---JavaScript_ECMAScript_ES6-ES11新特性工作笔记026
然我们再去看我们使用Promise封装一下 ajax请求可以看到上面是用普通的XMLHTTPRequest,发送请求的写法. 我们写完以后可以看到右边出现结果了因为我们用了个live server ...
原生ajax请求的封装
原生ajax请求的封装原生ajax请求分为四步: 1.创建请求对象判断浏览器的兼容问题 ie浏览器:window.ActiveXObject 常用浏览器:window.XMLHttpRequest ...
javscript之原生ajax请求的封装
目录 ajax系列 2:完美版本的ajax请求 ajax系列 1:formateUrl 格式化url函数作用:就是在ajax发起请求的,需要配置url路径也就是格式化url 所以里面的参数大概有两 ...
ajax请求如何判断超时,ajax请求超时判断(转载)
ajax请求时有个参数可以借鉴一下 var ajaxTimeOut = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : ' ...
HTML封装AJAX请求，在请求里面写登录的逻辑 ajax 网络请求 post
调用方法: 先引用config.js,然后调用封装网络请求. 里面三个参数 1.url, 2.请求需要提交的数据, 3.请求类型 // 获取二维码.背景图片接口 getScheduleInfo() ...

mui封装的ajax请求

mui封装的ajax请求相关推荐

最新文章

热门文章