jQuery Ajax通用js封装

第一步：引入jQuery库

<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script>

第二步：开发Ajax封装类，已测试通过，可以直接调用，直接贴代码，讲解就省了

/*****************************************************************

                  jQuery Ajax封装通用类  (linjq)

*****************************************************************/

$(function(){

    /**

     * ajax封装

     * url 发送请求的地址

     * data 发送到服务器的数据，数组存储，如：{"date": new Date().getTime(), "state": 1}

     * async 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

     *       注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

     * type 请求方式("POST" 或 "GET")， 默认为 "GET"

     * dataType 预期服务器返回的数据类型，常用的如：xml、html、json、text

     * successfn 成功回调函数

     * errorfn 失败回调函数

     */

    jQuery.ax=function(url, data, async, type, dataType, successfn, errorfn) {

        async = (async==null || async=="" || typeof(async)=="undefined")? "true" : async;

        type = (type==null || type=="" || typeof(type)=="undefined")? "post" : type;

        dataType = (dataType==null || dataType=="" || typeof(dataType)=="undefined")? "json" : dataType;

        data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;

        $.ajax({

            type: type,

            async: async,

            data: data,

            url: url,

            dataType: dataType,

            success: function(d){

                successfn(d);

            },

            error: function(e){

                errorfn(e);

            }

        });

    };

    /**

     * ajax封装

     * url 发送请求的地址

     * data 发送到服务器的数据，数组存储，如：{"date": new Date().getTime(), "state": 1}

     * successfn 成功回调函数

     */

    jQuery.axs=function(url, data, successfn) {

        data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;

        $.ajax({

            type: "post",

            data: data,

            url: url,

            dataType: "json",

            success: function(d){

                successfn(d);

            }

        });

    };

    /**

     * ajax封装

     * url 发送请求的地址

     * data 发送到服务器的数据，数组存储，如：{"date": new Date().getTime(), "state": 1}

     * dataType 预期服务器返回的数据类型，常用的如：xml、html、json、text

     * successfn 成功回调函数

     * errorfn 失败回调函数

     */

    jQuery.axse=function(url, data, successfn, errorfn) {

        data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;

        $.ajax({

            type: "post",

            data: data,

            url: url,

            dataType: "json",

            success: function(d){

                successfn(d);

            },

            error: function(e){

                errorfn(e);

            }

        });

    };

});

第三步：调用模拟

<%@ page language="java" pageEncoding="utf-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

            + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <base href="<%=basePath%>">

        <title>jQuery Ajax封装通用类测试</title>

        <meta http-equiv="pragma" content="no-cache">

        <meta http-equiv="cache-control" content="no-cache">

        <meta http-equiv="expires" content="0">

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="This is my page">

        <jsp:include page="/view/common/js_taglib.jsp"></jsp:include>

        <script type="text/javascript">

        $(function(){

            $.ax(

                getRootPath()+"/test/ajax.html",

                null,

                null,

                null,

                null,

                function(data){

                    alert(data.code);

                },

                function(){

                    alert("出错了");

                }

            );

            $.axs(getRootPath()+"/test/ajax.html", null, function(data){

                alert(data.data);

            });

            $.axse(getRootPath()+"/test/ajax.html",

                null,

                function(){

                    alert("成功了");

                },

                function(){

                    alert("出错了");

            });

        });

          </script>

    </head>

    <body>

    </body>

</html>

jQuery Ajax 二次封装的更多相关文章

  1. ajax二次封装之异步加载

    ajax二次封装之异步加载 ajax异步加载会导致在数据未加载回来就读取数据,然后出现数据为空的报错.在ajax封装时,将ajax直接改为同步,虽然可以解决报错,但是会导致页面渲染被阻塞,接口反应时间 ...

  2. jQuery Ajax通用js封装

    第一步:引入jQuery库 <script type="text/javascript" src="<%=path%>/resources/js/jqu ...

  3. 省市区三级联动（jquery+ajax）（封装和不封装两种方式）-----2017-05-15

    首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...

  4. jquery ajax的再次封装，简化操作

    1.封装的ajax var funUrl=""   // 每个请求地址相同的部分 function queryData(url,params,success,error){ url ...

  5. 对jquery的ajax进行二次封装以及ajax缓存代理组件：AjaxCache

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...

  6. 对jquery的ajax进行二次封装

    第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...

  7. 一、Ajax 二、JSON数据格式 三、Ajax+Jquery 四、分页的实现

    一.Ajax概述###<1>概述 ###<2>组成 以XMLHttpRequest为核心,发送Ajax请求和接收处理结果 以javascript为语言基础 以XML/JSON作 ...

  8. ajax请求原理及jquery $.ajax封装全解析

    .ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...

  9. jQuery Ajax封装（附带加载提示和请求结果提示模版）

    1.创建HTML文件(demo) <!doctype html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. Git 版本管理基本操作

    Git是一个版本管理操作的工具 非常N,可以很智能的分布式管理, 本网站学习笔记 来自于廖雪峰老师的内容借鉴 安装 yum -y install git 本地设置全局 告知是谁提交代码 信息 # gi ...

  2. openCV（三）---图像缩放

    UIImage *img1 = [UIImage imageNamed:@"1448941176867"]; //将UIImage转换为IplImage格式 IplImage *p ...

  3. C++设计模式-Singleton单例模式

    template <typename T> class Singleton { public: template <typename... Args> static T* In ...

  4. STM32F407IG开启FPU，做开方运算

    STM32F407IG开启FPU,做开方运算 MDK KEIL中使用STM32F4XX芯片硬件浮点单元FPU Keil中使用STM32F4xx硬件浮点单元 STM32F4-浮点DSP库的MDK开发环境 ...

  5. 由浅到深理解java反射

    1.基础概念 class类: 1.1java是面向对象的,但是在java中存在两种东西不是面向对象的 一种是普通的数据类型,这也是封装数据类存在的原因. 二种是静态静态成员. 1.2所以我们首先要理解 ...

  6. CodeForces 719A Vitya in the Countryside 思维题

    题目大意:月亮从0到15,15下面是0.循环往复.给出n个数字,如果下一个数字大于第n个数字输出UP,小于输出DOWN,无法确定输出-1. 题目思路:给出0则一定是UP,给出15一定是DOWN,给出其 ...

  7. POJ 2031 Building a Space Station 最小生成树模板

    题目大意:在三维坐标中给出n个细胞的x,y,z坐标和半径r.如果两个点相交或相切则不用修路,否则修一条路连接两个细胞的表面,求最小生成树. 题目思路:最小生成树树模板过了,没啥说的 #include& ...

  8. hiho#1128 : 二分·二分查找

    input 1<=n<=1e6 1<=k<=2*1e9 a1 a2 ... an 1<=an<=2*1e9 output k存在则输出k是第几大的数,否则输出-1 ...

  9. struts2获得提交是get还是post方法提交

    String method=ServletActionContext.getRequest().getMethod(); System.out.println(method); 如果是get  会打印 ...

  10. Android Studio中配置及使用OpenCV示例

    Android Studio配置及使用OpenCV 前言:最近在做项目移植,项目较大,在Eclipse中配置的Jni及OpenCV环境没任何问题,但是迁移到Studio中就问题一大堆,网上也找了一些资 ...