基于jquery.ajax的进一步封装

最新推荐文章于 2021-08-05 17:50:32 发布

cc_allen_cc

最新推荐文章于 2021-08-05 17:50:32 发布

阅读量881

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/caihuajian235/article/details/19071975

JQuery 专栏收录该内容

5 篇文章

订阅专栏

这是最近写项目用到的一个小功能，给大家分享下，希望对大家有帮助。

直接上代码：

%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
   src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/css/jquery-ui-1.10.3.custom.css">
<script type="text/javascript"
   src="${pageContext.request.contextPath}/js/jquery-ui-1.10.3.custom.js"></script>
<style type="text/css">
.loading-indicator {
   font-size: 8pt;
   background-image:
       url(${pageContext.request.contextPath}/loading_images/loading.gif);
   background-repeat: no-repeat;
   background-position: top left;
   padding-left: 20px;
   height: 18px;
   text-align: left;
}

#loading {
   position: absolute;
   left: 45%;
   top: 40%;
   border: 3px solid #B2D0F7;
   background: white
       url(${pageContext.request.contextPath}/loading_images/block-bg.gif)
       repeat-x;
   padding: 10px;
   font: bold 14px verdana, tahoma, helvetica;
   color: #003366;
   width: 180px;
   text-align: center;
}

#ajaxLoading {
   position: absolute;
   left: 45%;
   top: 40%;
   border: 3px solid #B2D0F7;
   background: white
       url(${pageContext.request.contextPath}/loading_images/block-bg.gif)
       repeat-x;
   padding: 10px;
   font: bold 14px verdana, tahoma, helvetica;
   color: #003366;
   width: 180px;
   text-align: center;
}
</style>

<script type="text/javascript">
   //判断页面是否加载完毕，如果加载完毕，就删除加载信息的DIV
   document.onreadystatechange = function() {
       try {
           if (document.readyState == "complete") {
               $("#loading").hide();
           }
       } catch (e) {
           alert("Page loading failure. Error message: " + e);
       }
   };

function showLoading(){
   $("#ajaxLoading").show();
}
function hideLoading(){
   $("#ajaxLoading").hide();
}
/**
* 带loading的ajax请求
*/
function request(url,options,callback){
   var o = options;
   o.url = url;
   o.beforeSend = showLoading;
   o.error = function(XMLHttpRequest, textStatus, errorThrown){
       alert("Ajax request for \"" + errorThrown + "\" error.");
   };
   o.success = function(arguments){
       hideLoading();
       callback(arguments);
   };
   $.ajax(o);
}
$(function(){
/**
* 带loading的返回json格式的ajax 请求
* 使用方式如下： request.get(),request.post(),request.del(),request.put()
*/
var methodType = ["get","post","del","put"];
for(var m = 0; m < methodType.length; m++){
   (function(){
       var o = {dataType : "json",type : methodType[m].toUpperCase()};
       if(m == 2){o.type = "DELETE";}// delete是javascript的关键字
       request[methodType[m]] = function(url, data, callback){
           if(data instanceof Function){
                   request(url, o, data);
                   return;
               }
           o.data = data;
           request(url, o, callback);
       };
   })();
}
});
</script>
</head>
<body>
   <div id="loading">
       <div class="loading-indicator">The page is loading...</div>
   </div>
   
   <div id="ajaxLoading" style="display: none;">
       <div class='loading-indicator'>Please Wait loading...</div>
   </div>
</body>
</html>

在需要异步交互的页面直接将该页面包含进取：

然后使用：request(url,arg,callback);request.get(),request.post(),request.del(),request.put()

例如：request(
            url,
           {
               data : arg,
               dataType : "json"
           },
           function(data) {


           });
   这些代码实现的功能是，在用户点击异步请求是，如果后台还在处理数据，就会出现正在加载的提示框，加载完后提示框消失。如果请求出错会提示错误信息。