第一步：引入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. <顶>vim快捷键映射Map使用

    问题描述: 使用vim中的快捷键映射map,可以自定义快捷键 问题解决: (1)vim模式 (2)map前缀 (3)删除映射Map (4)使用示例 (5)查看快捷键映射 命令行---:verbose ...

  2. 【转】Dancing Links题集

    转自:http://blog.csdn.net/shahdza/article/details/7986037 POJ3740 Easy Finding [精确覆盖基础题]HUST1017 Exact ...

  3. win8 任务栏不合并隐藏标题

    让win8任务栏不合并,并且隐藏标题的办法: 效果如下: 首先让win8不合并任务栏 1.任务栏上点鼠标右键 -- "属性" 2."任务栏按钮"选择" ...

  4. uva 514

    栈的简单应用 /************************************************************************* > Author: xlc28 ...

  5. c# 与 Unity3d 中的序列化

    圣典中对于Unity3D的序列化介绍很容易和C#的序列化介绍搞混,做个笔记,方便以后查找. 很多资料算是拾人牙慧. 一.Serializable 序列化 Inherits from Attribute ...

  6. Android Activity初探

    原地址:Android Activity初探 Activity是一个应用中的组件,它为用户提供一个可视的界面,方便用户操作,比如说拔打电话.照相.发邮件或者是浏览地图等.每个activity会提供一个 ...

  7. linux sort 命令详解(转 )

    linux sort 命令详解 sort是在Linux里非常常用的一个命令,管排序的,集中精力,五分钟搞定sort,现在开始! 1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比 ...

  8. Photoshop：制作金属质感-不锈钢纹理

    效果图 过程: 1.滤镜->渲染->云彩 2.滤镜->模糊->高斯模糊 3.滤镜->杂色->添加杂色 ,数量10 4.滤镜->模糊->径向模糊 5.滤镜 ...

  9. WCF入门（六）---主机WCF服务

    建立一个WCF服务后,下一步就是托管它,以便客户端应用程序可以使用,这就是所谓的WCF服务托管. WCF服务可以通过使用任何的四种方法如下托管. IIS主机 - IIS是Internet信息服务的缩写 ...

  10. PowerDesigner技巧

    原文:PowerDesigner技巧 1.PowerDesigner使用MySQL的auto_increment  ◇问题描述:  PD怎样能使主键id使用MySQL的auto_increment呢? ...