基于jquery.ajax的进一步封装
這是最近寫項目用到的一個小功能，給大家分享下，希望對大家有幫助。
直接上代碼：
?%@ 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>
?? ?<!-- ajax的loading -->
?? ?<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) {
?? ??? ??? ????
?? ??? ??? ?});
?? 這些代碼實現的功能是，在用戶點擊異步請求是，如果后臺還在處理數據，就會出現正在加載的提示框，加載完后提示框消失。如果請求出錯會提示錯誤信息。
總結
以上是生活随笔為你收集整理的基于jquery.ajax的进一步封装的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于ansys仿真
- 下一篇： C语言中期报告模板,学院毕业设计(论文)