第一步：引入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通用js封装的更多相关文章

  1. jQuery Ajax 二次封装

    jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%> ...

  2. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  3. 类似jQuery的原生JS封装的ajax方法

    一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...

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

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

  5. jquery(ajax)与js(ajax)的比较

    原始js: function update_mess(){ var account_name = $("#account").val(); var xmlhttp; if(wind ...

  6. jquery ajax 传递js对象到后台

    第一种:通过struts接收 (function ($) { $("#btnsave").click(function () { var params = {}; params[& ...

  7. 第110天：Ajax原生js封装函数

    一.Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHtt ...

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

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

  9. ajax 原生js封装ajax [转]

    /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...

随机推荐

  1. jquery each函数对应的continue 和 break方法

    continue: return true; break: return false; $("#oGrid").each(function (i, v) { if (i == 0) ...

  2. Win7超级终端查看单片机printf输出

    问题描述:     编写单片机C程序时,经常会用到printf输出信息进行查看,如何查看printf输出? 问题解决:     (1)编写单片机C程序     ucos是一个实时多任务操作系统,以上是 ...

  3. 【BZOJ】【2818】Gcd

    欧拉函数/莫比乌斯函数 嗯……跟2190很像的一道题,在上道题的基础上我们很容易就想到先求出gcd(x,y)==1的组,然后再让x*=prime[i],y*=prime[i]这样它们的最大公约数就是p ...

  4. Unity3D 游戏开发构架篇 —— 动态大场景生成 = 区域加载+对象池管理

    项目做一个类似无尽模式的场景,想了一想,其实方法很简单,做一个相关的总结. 主要先谈一谈构架,后期附上代码. 一.区域加载 其实无尽场景的实现很简单,因为屏幕限制,那么不论何时何地,我们只能看到自己的 ...

  5. 转：[gevent源码分析] 深度分析gevent运行流程

    [gevent源码分析] 深度分析gevent运行流程 http://blog.csdn.net/yueguanghaidao/article/details/24281751 一直对gevent运行 ...

  6. Open multiple Eclipse workspaces on the Mac

    This seems to be the supported native method in OS X: cd /Applications/eclipse/ open -n Eclipse.app ...

  7. HDU 1452 Happy 2004（因子和的积性函数）

    题目链接 题意 : 给你一个X,让你求出2004的X次方的所有因子之和,然后对29取余. 思路 : 原来这就是积性函数,点这里这里这里,这里讲得很详细. 在非数论的领域,积性函数指所有对于任何a,b都 ...

  8. 恢复mdf文件到数据库方法

    CREATE DATABASE crm_testdb1 ON (FILENAME = N'C:\e527051\crm_testdb\crm_testdb_20121104.mdf')FOR ATTA ...

  9. longene QQ 安装目录

    longene QQ 在Ubuntu 12.04上的安装目录如下: wy@wy-Inspiron-7420:~/.longene/qq/drive_c/Program Files/Tencent/QQ ...

  10. C#调用Win32 api学习总结

    从.NET平台调用Win32 API Win32 API可以直接控制Microsoft Windows的核心,因为API(Application Programming Interface)本来就是微 ...