jquery中ajax异步调用接口
之前写过一个原始的、无封装的页面，没有引入任何外部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 ...
随机推荐
- PHP练习题二
1.抓取远程图片到本地,你会用什么函数? fsockopen, A 2.用最少的代码写一个求3值最大值的函数. function($a,$b,$c){* W0 z* u6 k+ e. L a: }5 ...
- MyBatis无限输出日志
最近在项目中使用mybatis与spring集成,由于项目使用maven分模块打包,经常遇到mybatis mapper少配置子模块或者maven pom中忘记引用子模块导致的mybatis加载不到d ...
- [国家集训队2011]happiness
Description 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友 ...
- hdu 5719 Arrange 贪心
Arrange Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) Proble ...
- scala学习手记37 - 容器的使用
这次统一看一下scala中容器类的几个方法. Set filter()方法 filter()方法用来从Set中过滤获取含有指定特征的元素.示例代码如下: val colors1 = Set(" ...
- Django进阶Model篇005 - QuerySet常用的API
django.db.models.query.QuerySet QuerySet特点: 1.可迭代 2.可切片 查询相关API 1.get(**kwargs):返回与所给的筛选条件相匹配的对象,返回结 ...
- MySQL连接中出现大量的 init 状态问题
最怕的就是睡一觉醒来,系统出了问题. 大早系统无法登陆,以前没有经验的同学code的代码,竟然 try catch 没有记录异常日志信息. 查的问题一点头绪都没有,一直锁定在公司公共网关接口出了问题. ...
- IOS-KVO、KVC
√ 概述 KVC/KVO是观察者模式的一种实现,在Cocoa中是以被万物之源NSObject类实现的NSKeyValueCoding/NSKeyValueObserving 非正式协议的形式被定义为 ...
- 【Java】final关键字
1.final数据 (1)基本类型 数值恒定不变 (2)对象引用 引用恒定不变,初始化的时候指向一个对象后,无法改变为另一个对象,但是对象本身可以修改 2.final方法 可以把方 ...
- JS 页面加载触发事件 document.ready和onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...