这是一个关于前端应用和主机配置的代码示例。博客内容展示了如何通过JavaScript实现应用列表的展示，包括应用名称和对应的主机列表。同时，它还包含了交互功能，如点击按钮显示或隐藏添加应用的弹窗，并使用Ajax进行数据提交。该代码涉及到HTML、CSS、jQuery和Ajax等技术。
display: none;
}
.shadow {
position:fixed;
left:0;
top: 0;
bottom: 0;
right: 0;
background-color: black;
opacity:0.6;
z-index: 1;
}
.add-app {
position: fixed;
height: 400px;
width: 400px;
margin-left:100px ;
border: 1px solid indianred;
top: 100px;
left:25%;
background-color: white;
z-index: 2;
}
应用列表:
应用名称应用主机列表
{% for row in app_list%}{{ row.name }}{% for host in row.r.all %}{{ host.hostname }}{% endfor %}{%endfor%}$(function () {
$(‘#i1‘).click(function () {
$(‘.shadow,.add-app‘).removeClass(‘hide‘);
})
$(‘#i2‘).click(function () {
$(‘.shadow,.add-app‘).addClass(‘hide‘);
})
$("#ajax_submit").click(function () {
$.ajax({
url:‘/xiaoqing/ajax_submit/‘, #//提交url
data:$("#add_form").serialize(), #//input,select数据打包发向后台
type:‘POST‘, #//提交请求类型
dataType:‘Json‘, #//发送数据类型
traditional:true, #//如果是多选的话，必须加上此选项
success:function (obj) { #//发送成功后回调函数
console.log(obj);
location.reload();#刷新
location。href(‘http://‘) #跳转
},
error:function () {
}
})
})
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
