之前写过一个原始的、无封装的页面，没有引入任何外部js，直接实例化Ajax的XmlRequest对象去异步调用接口，参见Ajax异步调用http接口后刷新页面，可对比一下。
现在我们用jquery包装异步调用:
1、在html中导入jquery脚本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/jquery.json-viewer.css">
<link rel="stylesheet" type="text/css" href="./css/wave.css">
<link rel="stylesheet" type="text/css" href="./css/memcacheview.css">
</head>
<body>
<div class="container skin-1">
<div class="main-container">
<div class="main transitions-3">
<div class="json-checker-box no-json">
<div class="json-checker">
<div class="cache-key-box">
<input type="" name="cache_key" id="cache_key" class="cache-key">
<div class="history-box"></div>
</div>
<div class="operation-box">
<button class="check-btn waves-effect ">查询</button>
<button class="update-btn waves-effect ">刷新</button>
<button class="delete-btn waves-effect ">删除</button>
</div> </div>
<div class="category-choosed choosed-hide">缓存块：<span></span></div>
<div class="loading loading-hide"></div>
</div>
<div class="json-renderer-box">
<div class="fullscreen-btn" title="全屏"></div>
<div class="upfold-btn" title="隐藏搜索栏"></div>
<input type="checkbox" name="collapsed" class="checkbox-btn" id="collapsed_btn" title="数据是否折叠">
<input type="checkbox" name="withQuotes" class="checkbox-btn" id="withQuotes_btn" title="键值是否加引号">
<div class="nojson-btn" title="全屏搜索"></div>
<div class="json-renderer-container">
<pre class="json-renderer" id="json_renderer"></pre>
</div>
</div>
<div class="info-notify"></div>
</div>
</div>
<div class="slidebar transitions-3">
<!-- <div class="slidebar-title">缓存分类</div> -->
<div class="menu"> <div class="fold-btn"><div class="fold-icon"></div></div>
<span class="menu-title">缓存</span>
<input type="radio" name="skin" value="skin-2" class="skin-radio">
<input type="radio" name="skin" value="skin-1" class="skin-radio" checked="checked">
</div> <ul class="category">
<!-- <li class="category-item waves-effect waves-button"><span class="item-text">BOOKCOVERCACHE</span></li> -->
</ul>
<div class="water"></div>
</div>
<div class="cache-name-notify"></div> </div> <script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/jquery.json-viewer.js"></script>
<script src="./js/wave.js"></script>
<script src="./js/memcacheview.js"></script>
</body>
</html>
2、在js脚本中祭出ajax利器，memcacheview.js文件：
$(document).ready(function() {
window.dataCtrl = {
init: function() {
var _this = this;
this.portNum = "9092";
this.host = "http://"+window.location.host + "/";
this.cacheName = "";
this.jsonData = {};
this.jsonOptions = {
collapsed: false,
withQuotes: false
}
this.isSlidebarHide = false;
this.isUpFold = false;
this.isFullSearch = true;
this.operationType = 1;
this.cacheHistory = localStorage.getItem("cacheHistory")?localStorage.getItem("cacheHistory").split(","):[];
this.changeSkin();
this.initHistory();
Array.prototype.removeByValue = function(val) {
for(var i=0; i<this.length; i++) {
if(this[i] == val) {
this.splice(i, 1);
break;
}
}
};
},
addListener: function() {
var _this = this;
$(".category").on("click", ".category-item", function(e) {
var target = $(e.target);
$(".category>.category-item").removeClass("active");
if (target.is("span")) {
_this.cacheName = $(e.target).text();
$(e.target).parent().addClass("active");
var _keyProfix = target.parent().data("keyProfix");
var _supportRefresh = target.parent().data("supportRefresh");
} else {
_this.cacheName = $(e.target).find(".item-text").text();
$(e.target).addClass("active");
var _keyProfix = target.data("keyProfix");
var _supportRefresh = target.data("supportRefresh");
}
$("#cache_key").attr("placeholder","示例："+_keyProfix);
$(".update-btn").attr("disabled",!_supportRefresh);
$(".category-choosed").addClass("choosed-hide");
setTimeout(function() {
$(".category-choosed").removeClass("choosed-hide");
$(".category-choosed").find(">span").text(_this.cacheName+" (key值规则："+_keyProfix+")");
}, 300)
});
$(".category").on("mouseenter", ">.category-item", function(e) {
var target = $(e.target);
var cacheNotify = $(".cache-name-notify");
if (_this.isSlidebarHide) {
cacheNotify.css({
"top": (target.offset().top + (target.height() - cacheNotify.height()) / 2) + "px",
});
cacheNotify.text(target.find("span").text());
cacheNotify.addClass("notify-show");
}
});
$(".category").on("mouseleave", ">.category-item", function(e) {
$(".cache-name-notify").removeClass("notify-show");
});
$(".upfold-btn").on("click", function() {
_this.upFold();
_this.fullscreenBtnChange();
});
$(".fold-btn").on("click", function() {
_this.slideBarToggle();
_this.fullscreenBtnChange();
});
$(".fullscreen-btn").on("click", function() {
$(this).toggleClass("full-screen");
if (_this.isSlidebarHide == _this.isUpFold) {
_this.slideBarToggle();
_this.upFold();
} else {
if (!_this.isSlidebarHide) {
_this.slideBarToggle();
}
if (!_this.isUpFold) {
_this.upFold();
}
}
});
$("#collapsed_btn").on("click", function() {
_this.jsonOptions.collapsed = $(this).is(':checked');
$("#json_renderer").jsonViewer(_this.jsonData, _this.jsonOptions);
});
$("#withQuotes_btn").on("click", function() {
_this.jsonOptions.withQuotes = $(this).is(':checked');
$("#json_renderer").jsonViewer(_this.jsonData, _this.jsonOptions);
});
$(".nojson-btn").on("click", function() {
_this.fullSearch(true);
});
$(".main").on("GetDataSuccess", function() {
$("#json_renderer").jsonViewer(_this.jsonData, _this.jsonOptions);
_this.fullSearch(false);
if (_this.operationType == 1) {
_this.infoNotify("查询成功");
}else if(_this.operationType == 3){
_this.infoNotify("刷新成功");
}
});
$(".main").on("DeleteDataSuccess", function() {
$("#json_renderer").jsonViewer(_this.jsonData, _this.jsonOptions);
_this.infoNotify("删除成功");
});
$(".json-renderer").on("GetDataFailed", function() {
if (_this.operationType == 1) {
_this.infoNotify("查询失败","danger");
}else if(_this.operationType == 3){
_this.infoNotify("刷新失败","danger");
}else if(_this.operationType == 2){
_this.infoNotify("删除失败","danger");
}
});
$(".slidebar").on("GetListSuccess", function() {
for (var i = 0; i < _this.categoryArr.length; i++) {
var _category_item = $('<li class="category-item waves-effect waves-button"><span class="item-text">' + _this.categoryArr[i].cacheName + '</span></li>');
_category_item.data("keyProfix",_this.categoryArr[i].keyProfix);
_category_item.data("supportRefresh",_this.categoryArr[i].supportRefresh);
$(".category").append(_category_item);
}
$(".water").addClass('water-show');
});
// 查询按钮
$(".check-btn").on("click", function() {
_this.operate(1);
});
// 更新按钮
$(".update-btn").on("click", function() {
_this.operate(3);
});
// 删除按钮
$(".delete-btn").on("click", function() {
_this.operate(2);
});
// 输入框
$("#cache_key").on("focus", function() {
_this.fullSearch(true);
if(!$("#cache_key").val() && _this.cacheHistory.length>0){
$(".history-box").addClass("history-show");
}
});
//模拟输入框失焦
$(".main").on("click",function(e){
var target = $(e.target);
if(!target.hasClass("history-delete") && !target.hasClass("cache-key")){
$(".history-box").removeClass("history-show");
}
});
$("#cache_key").on("input propertychange", function(){
if(!$("#cache_key").val()){
$(".history-box").addClass("history-show");
}else{
$(".history-box").removeClass("history-show");
}
});
$(".skin-radio").on("click",function(){
_this.changeSkin();
});
$(".history-box").on("click",".history-delete",function(e){
var history_item = $(e.target).parent();
_this.cacheHistory.removeByValue(history_item.find(">span").text());
localStorage.setItem("cacheHistory",_this.cacheHistory);
history_item.remove();
if(_this.cacheHistory.length == 0){
$(".history-box").removeClass("history-show");
}
});
$(".history-box").on("click",".history-item>span",function(e){
$("#cache_key").val($(e.target).text());
});
},
getCacheDate: function(cacheName, key, operationType) {
var _this = this;
$.ajax({
url: _this.host + "getCacheDate",
dataType: "json",
method: "post",
data: {
cacheName: cacheName,
key: key,
operationType: operationType
},
success: function(result) {
$(".loading").addClass("loading-hide");
if(result.msg == "delete sucess"){
_this.jsonData = {};
$(".json-renderer").trigger("DeleteDataSuccess");
}else{
_this.jsonData = result;
$(".json-renderer").trigger("GetDataSuccess");
}
},
error: function(err) {
console.log(err);
$(".loading").addClass("loading-hide");
$(".json-renderer").trigger("GetDataFailed");
}
});
},
getCacheList: function() {
var _this = this;
$.ajax({
url: _this.host + "cacheList",
dataType: "json",
method: "get",
data: {},
success: function(result) {
_this.categoryArr = result;
$(".category").trigger("GetListSuccess");
},
error: function(err) {
console.log(err);
$(".category").trigger("GetListFailed");
}
});
},
getSearchData: function() {
if (!this.cacheName) {
this.infoNotify("请先选择缓存区块", "danger");
return "";
} else if (!$("#cache_key").val().trim()) {
this.infoNotify("请输入查询关键字", "danger");
return "";
} else {
return {
cacheName: this.cacheName,
key: $("#cache_key").val().trim()
}
}
},
operate: function(operationType) {
var _this = this;
var search_data = _this.getSearchData();
_this.operationType = operationType;
if (search_data) {
$(".loading").removeClass("loading-hide");
for(var i = 0; i < _this.cacheHistory.length; i++){
if(search_data.key == _this.cacheHistory[i]){
break;
}
}
if(i == _this.cacheHistory.length){
_this.cacheHistory.push(search_data.key);
localStorage.setItem("cacheHistory",_this.cacheHistory);
$(".history-box").prepend($('<div class="history-item"><span>'+search_data.key+'</span><a class="history-delete">×</a></div>'));
}
_this.getCacheDate(search_data.cacheName, search_data.key, operationType);
}
},
setJsonData: function(json_new) {
this.jsonData = json_new;
json_new = null;
},
getJsonDate: function() {
return this.jsonData;
},
getCacheName: function() {
return this.cacheName;
},
slideBarToggle: function() {
$(".container > .slidebar").toggleClass("slidebar-hide");
$(".fold-btn").find(".fold-icon").toggleClass("unfold");
setTimeout(function() {
$(".container > .main-container > .main").toggleClass("slidebar-hide");
}, 100);
this.isSlidebarHide = $(".container > .slidebar").hasClass("slidebar-hide");
},
upFold: function() {
$(".json-checker-box").toggleClass('full-screen');
$(".json-renderer-box").toggleClass('full-screen');
$(".upfold-btn").toggleClass('upfold');
this.isUpFold = $(".json-checker-box").hasClass("full-screen");
},
fullSearch: function(isFullSearch) {
if (isFullSearch || isFullSearch == undefined) {
$(".json-checker-box").addClass("no-json");
this.isFullSearch = true;
} else {
$(".json-checker-box").removeClass("no-json");
this.isFullSearch = false;
}
},
fullscreenBtnChange: function() {
if (this.isSlidebarHide && this.isUpFold) {
$(".fullscreen-btn").addClass("full-screen");
} else {
$(".fullscreen-btn").removeClass("full-screen");
}
},
infoNotify: function(info, style) {
$(".info-notify").addClass("notify-show").addClass(style).text(info);
var notify_hide = setTimeout(function() {
$(".info-notify").removeClass("notify-show").removeClass(style).text(info);
}, 1500);
$(".info-notify").one("mouseenter", function() {
clearTimeout(notify_hide);
});
$(".info-notify").one("mouseleave", function() {
setTimeout(function() {
$(".info-notify").removeClass("notify-show").removeClass(style).text(info);
}, 1000);
});
},
initHistory: function(){
for(var i = 0; i < this.cacheHistory.length; i++){
$(".history-box").prepend($('<div class="history-item"><span>'+this.cacheHistory[i]+'</span><a class="history-delete">×</a></div>'));
}
},
changeSkin(){
$(".container").removeClass("skin-1");
$(".container").removeClass("skin-2");
$(".container").addClass($(".skin-radio:checked").val());
}
}
Waves.init();
dataCtrl.init();
dataCtrl.addListener();
dataCtrl.getCacheList();
});