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 ...
随机推荐
- JSR规范整理
Web Service技术 Java Date与Time API ( JSR 310) Java API for RESTful Web Services (JAX-RS) 1.1 (JSR 311) ...
- MFC中如何在一个类中调用另一个类的控件
学习记录: 两个类,一个为主类 1个为:CCkDlg,主类 1个为: Https,用来做HTTPS请求获得页面状态. 测试界面如下: CCkDlg 类里定义函数 void CCkDlg::printf ...
- java 多继承的典型应用实例(不同的报文不同的方法去解析)
关于 java 多继承的典型应用实例 针对不同业务类型的XML文件的解析 在PCS 项目: public class CainiaoXMLMessageResolverServiceImpl impl ...
- 记一次Configured Capacity: 0 (0 B)的解决
场景 最近hadoop集群新加了一个节点N,通过Ambari管理 一切正常. 过了两天发现,虽然集群每天要进几个G的数据(共8个节点),但节点N占用空间丝毫没有变化,显然没有进数据啊 日志 查看该节点 ...
- Python 导出数据from Mysql
环境 Anaconda3 Python 3.6, Window 64bit 目的 从MySQL数据库读取目标表数据,并处理 代码 # -*- coding: utf-8 -*- import pand ...
- redis:php-redis中有序集合 zset的使用
ZSET(stored set) 和 set 一样是字符串的集合,不同的是每个元素都会关联一个 double 类型的 score .实现使用的是 skip list 和 hash table , sk ...
- web自动化中的page object模式
一. 原理 将页面的元素定位和元素行为封装成一个page类,实现页面对象和测试用例分离 类的属性:元素定位 类的行为:元素的操作 测试用例:调用所需页面对象中的行为,组成测试用例 二. 好处 1. 当 ...
- N!含有多少个 2/5质因子
编程之美127页,N!中含有质因数2的个数 = [N/2] + [N/4] + [N/8] + [N/16] + ..... 要理解上式,先看 编程之美126页,N!中含有质因数5的个数Z 举例:N ...
- grunt,gulp,webpack前端打包工具的特性
1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...
- telnet: connect to address ::1: connect refused [centos, linux]
在我测试邮件服务器时, 使用 telnet localhost 25 出现如下的提示: Trying::1... telnet: connect to address ::1:Connection r ...