之前写过一个原始的、无封装的页面，没有引入任何外部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();
});
jquery中ajax异步调用接口的更多相关文章
-
Jquery中Ajax异步请求中的async参数的作用
之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html <a href="javascript:void(0)" on ...
-
jquery ajax异步调用
写程序的第一步都要知其然,至于知其所以然就要看个人的爱好了.下面说一下web开发中经常用的ajax. 这里是用的jquery框架实现的ajax异步调用.废话少说先上代码.(asp.net开发) var ...
-
Ajax -异步请求 -jquery中ajax分类 -第一层 $.ajax -第二层($.get /$.post) -第三层($.getJson/$.getScript) -相应演示
Ajax 1.标准请求响应时浏览器的动作(同步操作) 1.1浏览器请求什么资源,跟随显示什么资源2.ajax:异步请求. 2.1局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内 ...
-
触碰jQuery：AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
-
触碰jQuery：AJAX异步详解（转）
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
-
jquery中ajax的简单使用
一.load() 这是最简单的一个函数,传入一个url他会异步加载该url的内容,然后将内容插入每一个选中的元素中,替换掉其中已经存在的内容. 所以最简单的用法是: $("#myDiv&qu ...
-
jquery中ajax的使用
Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进 ...
-
通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
-
关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
随机推荐
-
osg 路径 动画 效果
osg 路径 动画 效果 转自:http://blog.csdn.net/zhuyingqingfen/article/details/8248157 #include <osg/Group&g ...
-
cxf的soap风格+spirng4+maven 服务端
简介 SOAP 比较复杂,基于XML,有对应规范:REST利用HTTP请请求方式GET,POST,PUT,delete约定具体操作.简单的说,SOAP通过传输XML,XML定义了请求和响应的具体数据, ...
-
android学习笔记一——简介
android 是由Andy Rubin创立的一个手机操作系统,后被google收购. google希望同各方共同建立一个标准化.开放式的移动电话软件平台,从而在移动产业内形成了一个开放式的操作平台. ...
-
iOS 关于webView的使用方法
关于webView的使用方法还是比较简单的.直接上代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...
-
Django环境搭建和项目创建
1.下载安装python 2.打开shell(windows下cmd),安装虚拟环境工具: "pip install virtualenv".(可以通过“python -m pi ...
-
hello2 Source Analisis
hello2应用程序是一个web模块,它使用Java Servlet技术来显示问候和响应.此应用程序的源代码位于 _tut-install_/examples/web/servlet/hello2/目 ...
-
oracle用户间表数据复制迁移
如system用户要将scott中的emp表倒入其中,按如下方法: 1.登录scott用户 2.给system用户赋予查询emp标的权限: grant select on emp to system; ...
-
鼠标hover元素scale/zoom中心点放大效果实例页面
CSS代码: .box { /* 可见视觉区域 */ width: 480px; height: 250px; position: relative; overflow: hidden; cursor ...
-
Bind 和 ScaffoldColumn
今天看了music MVC源码看到这么一段代码 Bind 和 ScaffoldColumn [MetadataType(typeof(FormMetaData))] public partial cl ...
-
DEPHI XE5 XE6 ANDROID IOS开发的几点体会
DEPHI XE5 XE6 ANDROID IOS开发的几点体会 2014-09-04 20:48 1.不纠结于APK或者APP的大小.现在的客户端设备都很廉价,300元以上的新安卓设备都不在乎软件的 ...