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. 去掉input text后面的叉

    如题 input[type=text]::-ms-clear{ display: none; } input::-webkit-search-cancel-button{ display: none; ...

  2. 20150627分享iOS开发笔记

    util是工具的意思:Ad Hoc是特别的,临时的意思;validate是验证的意思: 打包 苹果的键盘真好使 6和6 plus真机测试报错:No architectures to compile f ...

  3. MySQL的索引创建、删除

    1_1.添加PRIMARY KEY(主键索引)  mysql>ALTER TABLE `table_name` ADD PRIMARY KEY ( `column` ) 1_2.添加UNIQUE ...

  4. sql中 replace函数

    例用 xxx 替换 abcdefghi 中的字符串 cde. SELECT REPLACE(''abcdefghicde'',''cde'',''xxx'')

  5. SQLServer在多个表中都增加一个字段的方法

    1.使用游标 declare @sql varchar(), @name varchar() declare my_cursor scroll cursor for select name from ...

  6. 学习笔记：GLSL Core Tutorial – Vertex Shader（内置变量说明）

    1.每个Vertex Shader都有用户定义的输入属性,例如:位置,法线向量和纹理坐标等.Vertex Shaders也接收一致变量(uniform variables). uniform vari ...

  7. GDT、GDTR、LDT、LDTR的理解

    GDT是全局描述附表,主要存放操作系统和各任务公用的描述符,如公用的数据和代码段描述符.各任务的TSS描述符和LDT描述符.(TSS是任务状态段,存放各个任务私有运行状态信息描述符)LDT是局部描述符 ...

  8. 【转】ThinkPHP 页面跳转

    ThinkPHP 提供了success 与error 方法用于带提示信息的页面跳转,如添加数据后显示提示信息并跳转等.success 方法用于操作成功后的提示,error 用于操作失败后的提示,二者使 ...

  9. 在Javascript中使用protobuf与c++进行通信

    环境:Win7_64旗舰版,VS2013 最近在研究Webkit,已经编译成功,接下来就是Javascript与c++如何传输数据,立刻就想到了protobuf,但是谷歌不支持Javascript,百 ...

  10. 闭包 -> map / floatMap / filter / reduce 浅析

    原创: 转载请注明出处 闭包是自包含的函数代码块,可以在代码中被传递和使用 闭包可以捕获和存储其所在上下文中任意常量和变量的引用.这就是所谓的闭合并包裹着这些常量和变量,俗称闭包.Swift 会为您管 ...