第一步：引入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. DispatcherServlet--Spring的前置控制器作用简介

    参考网址:http://jinnianshilongnian.iteye.com/blog/1602617 Struts有一个ActionServlet,用来完成前置控制器(分发器)的功能.其实,所有 ...

  2. javascript小实例，PC网页里的拖拽（转）

    这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...

  3. C编程实现2的1000次方（使程序中的n=1000即可）

    #include<stdio.h> #include<malloc.h> void double_(int n) { ,j,s,jw=; p=(int *)malloc(siz ...

  4. Java垃圾收集器

    概述 说起垃圾收集(Garbage Collection,GC),大部分人都把这项技术当做Java语言的伴生产物.事实上,GC的历史远远比Java久远,1960年诞生于MIT的Lisp是第一门真正使用 ...

  5. EXPRESS.JS再出发

    那个那个MEAN的书,看得七七八八,有了大概,现在就要一样一样的加深记忆啦.. EXPRSS.JS的东东,网上有现成入门书籍: 第一期代码测试: var express = require('expr ...

  6. hdu 1517 A Multiplication Game 博弈论

    思路:求必胜区间和必败区间! 1-9 先手胜 10-2*9后手胜 19-2*9*9先手胜 163-2*2*9*9后手胜 …… 易知右区间按9,2交替出现的,所以每次除以18,直到小于18时就可以直接判 ...

  7. hdu 3951 Coin Game 博弈论

    思路: 当n<=k时,先手必胜: 当k=1时,n为奇数先手胜,否则后手胜: 当k>1时,先手操作之后必定形成链,后手操作后形成二条一样的链,之后,先手怎么操作,后手就怎么操作,则后手必胜. ...

  8. [杂题]HDOJ5515 Game of Flying Circus

    嗯...这是一道水题... 鉴于还没人写这题的题解, 那我就来写一发. 题意:有个边长为300米的正方形 嗯  这样标号 有两个人A和S,开始的时候A.S都在1(左下角)那个位置. 两个人都要按照2. ...

  9. Floodlight 防火墙是如何起作用的

    前言 用mininet + floodlight搭建好环境之后,运行flooglight,然后在mininet中建立网络拓扑,建好之后,pingall,所有host之间可以ping通. 然后向控制器f ...

  10. Orcle数据库查询练习复习：二

    一.题目 1.找出所有成绩均低于80的学生姓名 select sname from student where sid in( ) select sname from student where si ...