1.
[root@yyjk templates]# cat displayredis.html
<html>
<head>
<title>运维平台</title>
<link rel="stylesheet" type="text/css" href="/static/Css/Monitor/displayredis.css">
<link rel="stylesheet" type="text/css" href="/static/Css/Public/header.css">
<link rel="stylesheet" type="text/css" href="/static/Css/Public/menu.css">
</head>
<body>
<include file="Public:header"/>
<div class="content">
<include file="Public:menu"/>
<div class="con fl">
<label class="condition">环境</label>
<select name="env" class="monitor">
</select>
<label class="condition">数据库主机IP</label>
<select name="monitor_ip" class="monitor">
</select>
<input type="button" value="Redis查询" class="monitor_add">
</div>
<table class="gridtable fr">
<tr><th>application</th><th>ipaddr</th><th>port</th><th>role</th><th>user_memory</th><th>maxmemory</th></tr>
</table>
</div>
</body>
<script type="text/javascript" src="/static/Js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="/static/Js/Monitor/displayredis.js"></script>
<script type="text/javascript" src="/static/Js/Public/ajax.js"></script>
</html>
2.
[root@yyjk templates]# cat /django/mysite/static/Js/Monitor/displayredis.js
$(function(){
var _env_select = $("select[name='env']");
var _select_ip = $("select[name='monitor_ip']");
var _input_button = $("input[type='button']");
var _table = $("table.gridtable");
getTemp("pro");
function getTemp(env){
var data = {};
var successfn = function(jdata){
var _HTML = "";
_env_select.html("");
$.each(jdata,function(i,val){
_HTML = _HTML + "<option value="+jdata[i][0]+">"+jdata[i][0]+"</option>";
});
_env_select.html(_HTML);
};
var errorfn = function(jdata){
alert("数据返回出错");
};
$.ajax({
type: "get",
data: data,
url: "/api/getredisapp",
dataType: "json",
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
};
/* _env_select.on("change",function(){
env = _env_select.val();
getTemp(env);
});*/
Transaction = function(){
this.selectedFun = function(){
var data = {};
data.env = _env_select.val();
var successfn = function(jdata){
var _HTML = "";
_select_ip.html("");
$.each(jdata,function(i,val){
_HTML = _HTML + "<option value="+jdata[i][0]+">"+jdata[i][0]+"</option>";
});
_select_ip.html(_HTML);
};
var errorfn = function(jdata){
alert("数据返回出错");
};
$.ajax({
type: "get",
data: data,
url: "/api/getredisip",
dataType: "json",
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
}
this.buttonFun = function(){
var data = {};
data.name = _env_select.val();
/*data.desc = _select_ip.find("option:selected").text();*/
data.ipaddr = _select_ip.val();
var successfn = function(jdata){
var _HTML = "<tr><th>application</th><th>ipaddr</th><th>port</th><th>role</th><th>used_memory</th><th>maxmemory</th></tr>";
_table.html("");
/*$.each(jdata,function(i,val){*/
_HTML = _HTML + "<tr>";
//var tdval = val.split("<->");
_HTML = _HTML + "<td>"+jdata["app"]+"</td>";
_HTML = _HTML + "<td>"+jdata["ipaddr"]+"</td>";
_HTML = _HTML + "<td>"+jdata["port"]+"</td>";
_HTML = _HTML + "<td>"+jdata["role"]+"</td>";
_HTML = _HTML + "<td>"+jdata["used_memory"]+"</td>";
_HTML = _HTML + "<td>"+jdata["maxmemory"]+"</td>";
//});
_HTML = _HTML + "</tr>";
_table.html(_HTML);
};
var errorfn = function(jdata){
alert("数据返回出错");
};
$.ajax({
type: "get",
data: data,
url: "/api/getredisList",
dataType: "json",
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
}
};
var transactionGet = new Transaction();
transactionGet.selectedFun();
_env_select.on('change',function(){
transactionGet.selectedFun();
})
_input_button.on('click',function(){
transactionGet.buttonFun();
});
})