之前写过一个原始的、无封装的页面，没有引入任何外部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(); });