继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Android 转web app(二) JQuery Ajax 网络请求封装

Coley_5
关注TA
已关注
手记 86
粉丝 8548
获赞 6550

先看一个基本的JQuery Ajax请求

$.ajax({
    url: "",    //请求的url地址
    dataType: "json",   //返回格式为json
    async: true, //请求是否异步,默认为异步,这也是ajax重要特性
    data: { "id": "value" },    //参数值
    type: "GET",   //请求方式
    beforeSend: function() {
        //请求前的处理
    },
    success: function(req) {
        //请求成功时处理
    },
    complete: function() {
        //请求完成的处理
    },
    error: function() {
        //请求出错处理
    }
});

通过代码可以看到,Jquery 已经为我们做了很好的封装,几行代码就可以实现网络请求访问。作为一个Android狗,看到这样的代码倍感情切。这和Android中的AsyncTask 简直就是失散多年的亲兄弟。一切网络请求前后的通用化处理,返回结果的通用化处理,经过简单的封装,就可以为我们节省大把的开发时间。
封装之前需要先介绍Jquery中的$.extends,类似于Java中的extends。其结构为$.extends(obj1,obj2,....); obj2会覆盖obj1。简单看个例子

var obj1={name: "张三",age: "18",success:function(){}}
var obj2={age: "20",success:function(){ alert("重载方法") }}
var obj3=$.extend(obj1,obj2);
//结果:obj1的age属性被覆盖,而且继承了obj1的name属性,重写了success方法
obj3= {{name: "张三",age: "20",success:function(){ alert("重载方法") }}

利用$.extends封装之后

function aj(opt){
    var def={
    // flag: 1,
        type:"post",
        dataType:"json",
        data:{},
        async:false,
        success:function(data){},
        beforeSend:function(){}
    };
    $.extend(def,opt);
    $.ajax({
        url:url+def.url,
        type:def.type,
        dataType:def.dataType,
        async:def.async,
        data:def.data,

        success: function(json){

            if(json.hasOwnProperty("error")){
                alert(json.errorMsg);
            }else{
                def.success(json);
            }
        },
        beforeSend:function(){
            showLoadingDialog();
        },
        error:function(){
            alert("出错了!");
        }
        complete:function(){
            closeLoadingDialog();
        }
    });
}

在网络请求开始之前,显示正在加载Dialog,网络请求结束,关闭Dialog,对错误结果进行统一处理。来看下使用

function loadData() {
        aj({
            type : "get",
            data : {
                aid : aid
            },
            url : '/active/detail',
            success : function(data) {

            }
        });
}

代码更加清爽简介

打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP