zoukankan      html  css  js  c++  java
  • 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()和上述原理相同,我就举两个典型的,剩下的大家有兴趣也可以试试!

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

  • 相关阅读:
    一首诗
    jsp作用域问题
    jsp关于request.setAttribue还有response.addCookie()的两个问题
    编程学习过程记录
    一些关于自己的未来的东西
    requests的post提交form-data; boundary=????
    记录一些爬虫的小细节
    【CSS3】CSS——链接
    【CSS3】CSS——文本
    【CSS3】background-clip与background-origin的联系与区别
  • 原文地址:https://www.cnblogs.com/lidelin/p/7008876.html
Copyright © 2011-2022 走看看