1.将html页面变成jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
2.如何接收数据进行显示
<form id="queryForm" action="/adver/getAdverByMac.ihtml" method="post">
<div class="box_center pt10 pb10">
<table class="form_table" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td align="center">广告ID:</td>
<td>
<input type="text" name="adverId" class="input-text lh25" size="18">
<input type="hidden" name="machineId"/>
</td>
<td>广告名称:</td>
<td><input type="text" name="adverName" class="input-text lh25" size="18"></td>
</tr>
</table>
<div class="box_bottom pb5 pt5 pr10"
style="border-top: 1px solid #dadada;">
<div style="text-align: center;">
<input type="submit" name="button" class="btn btn82 btn_search"
value="查询">
<input type="reset"
name="button" class="btn btn82 btn_search" value="重置">
</div>
</div>
</div>
</form>
3.注意action填写的地址来自于后台给
自己根据ctrl+H 搜索getAdverByMac.ihtml,会找到相应的controller.java页面
/**
* 查询每台终端机下所有广告
* @param map
* @param id
* @return
*/
@RequestMapping(value="getAdverByMac")
private String getAdverByMac(ModelMap map ,@ModelAttribute MachineAdverTemplate machineAdverTemplate){
try {
//查询终端机
Machine machine = machineService.get(machineAdverTemplate.getMachineId());
machineAdverTemplate.setMachineMac(machine.getMacAddrees());
List<MachineAdverTemplate> machineAdverTemplateList=adverService.getAdverByMac(machineAdverTemplate);
for(MachineAdverTemplate machineAdverTemplate1:machineAdverTemplateList){
AdverTemplateResource adverTemplateResource=new AdverTemplateResource();
adverTemplateResource.setAdverId(machineAdverTemplate1.getAdverId());
//查询模板
List<AdverTemplateResource> templateResourceList=adverTemplateResourceService.getList(adverTemplateResource);
if(templateResourceList.size()>0){
machineAdverTemplate1.setAdverTemplateResource(templateResourceList);
}
}
map.put("adverList", machineAdverTemplateList);
map.put("machine", machine);
} catch (Exception e) {
logger.error("查询终端机下所投放的广告异常:"+e.getMessage());
}
return "/adver/adver_find";
}
map.put(“adverList”, machineAdverTemplateList);//(对象变量)
对应这c标签中要输出的数组items=”
adverList”//items:对象var:自己定义的变量名varStatus:循环的数量长度标签内用双引号“
{adverList}”
标签外:
adverListjs中引用:content:‘/adver/getAdverByMac.ihtml?machineId=
{ machine.id }’
获取到json数据中的某个值利用
adver[‘adverId′]
{定义的变量名[‘后台定义的变量名的值’]}
如何寻找到 后台定义的变量名的值?
1.可以通过ctrl+H找到相应的文件
2.在利用ctrl+f搜索getAdverByMac找到相应的类
3.map.put(“adverList”, machineAdverTemplateList);
4.ctrl+鼠标点击MachineAdverTemplate找到该文件定义的变量adverId
<c:forEach items="${adverList}" var="adver" varStatus="i">
<li>
<div class="adv">
<i class="choose"></i>
<span class="adverID">${adver['adverId']}</span>
<span class="adverName">${adver['adverName']}</span>
<div class="caozuo">
<button class="see">查看</button>
<button class="del">删除</button>
</div>
</div>
<div class="detail" >
<ol>
<c:forEach items="${adver.adverTemplateResource}" var="template" >
<li class="module">
<span class="moduleId">${template['id'] }</span>
<span>${template['adverTemplateName'] }</span>
<button class="moudledel">删除</button>
</li>
</c:forEach>
</ol>
</div>
</li>
</c:forEach>
<c:if test="${ fn:length(adverList) < 1 }">
<li class="none">
没有搜索到相关数据
</li>
</c:if>
请求数据
/* 点击删除删除模板 */
$('.moudledel').click(function() {
const self = this;
//询问框
layer.confirm('您是如何确定删除?', {
btn: ['确认','取消'] //按钮
},function(index){
var adverId = $(this).parents("li").find(".adverID").text();
var machineId = '${machine.id }';
var templateId = $(this).parents("li.module").find("span.moduleId").text();
$.ajax({
type : "post",
url : "/adver/deleteAdverByMachine.ihtml",
data : {
"adverId" : adverId,
"machineId": machineId,
'templateId': templateId
},
async : false,
success : function(data) {
$(self).parents("li.module").remove();
},
error:function(){
alert("删除失败");
}
})
layer.close(index);
},function(){
});
})
完整的jsp代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.bottom_footer {
position: absolute;
bottom: 10px;
margin-left: 33%;
}
.list{
width: 100%;
border: 1px solid #d1d1d1;
padding: 10px;
box-sizing: border-box;
color: #333;
}
.list li{
width: 100%;
border-bottom: 1px solid #ccc;
line-height: 40px;
overflow:hidden;
}
.list li.none{
text-align: center;
}
.list li>span{
width: 25%;
display: inline-block;
}
.list li .adv {
float:left;
width: 100%;
}
.list li .adv .caozuo{
float: right;
width: 49%;
}
.list li .adv span{
width: 25%;
display: inline-block;
}
.list li .adv .caozuo button{
padding: 0 20px ;
display: inline-block;
border-radius: 2px;
outline: none;
border: none;
height: 30px;
color: #fff;
}
button.see{
background-color: #009688;
}
button.del{
background-color: #FF5722;
}
button.choose{
background-color: #1E9FFF;
}
button.moudledel{
background-color: #FF5722;
border-radius: 2px;
outline: none;
border: none;
color: #fff;
}
.list li .detail {
display:none;
padding: 0 20px;
/* width: 100px;
display: inline-block;
background: #fdd;
outline: none;
border: none;
height: 30px;
color: #fff; */
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<%@ include file="../common/base_common.jsp"%>
<link rel="stylesheet" href="${basePath}/static/css/infobox.css" rel="stylesheet" type="text/css" >
<script src="${basePath}/static/vendors/layer-v3.0.3/layer.js"></script>
<title>用户信息管理</title>
</head>
<body>
<div class="container">
<div id="search_bar" class="mt10">
<div class="box">
<div class="box_border">
<!-- <div class="box_top">
<b class="pl15">用户信息管理</b>
</div> -->
<form id="queryForm" action="/adver/getAdverByMac.ihtml" method="post">
<div class="box_center pt10 pb10">
<table class="form_table" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td align="center">广告ID:</td>
<td>
<input type="text" name="adverId" class="input-text lh25" size="18">
<input type="hidden" name="machineId"/>
</td>
<td>广告名称:</td>
<td><input type="text" name="adverName" class="input-text lh25" size="18"></td>
</tr>
</table>
<div class="box_bottom pb5 pt5 pr10"
style="border-top: 1px solid #dadada;">
<div style="text-align: center;">
<input type="submit" name="button" class="btn btn82 btn_search"
value="查询">
<input type="reset"
name="button" class="btn btn82 btn_search" value="重置">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<ul class="list">
<li>
<span>广告ID</span>
<span>广告名称</span>
<span>操作</span>
</li>
<c:forEach items="${adverList}" var="adver" varStatus="i">
<li>
<div class="adv">
<i class="choose"></i>
<span class="adverID">${adver['adverId']}</span>
<span class="adverName">${adver['adverName']}</span>
<div class="caozuo">
<button class="see">查看</button>
<button class="del">删除</button>
</div>
</div>
<div class="detail" >
<ol>
<c:forEach items="${adver.adverTemplateResource}" var="template" >
<li class="module">
<span class="moduleId">${template['id'] }</span>
<span>${template['adverTemplateName'] }</span>
<button class="moudledel">删除</button>
</li>
</c:forEach>
</ol>
</div>
</li>
</c:forEach>
<c:if test="${ fn:length(adverList) < 1 }">
<li class="none">
没有搜索到相关数据
</li>
</c:if>
</ul>
</div>
</div>
</div>
<script>
/* 点击查看显示详情 */
$('.see').toggle(function() {
$(this).parents("li").css("background", "#fff");
$(this).parents("li").find(".detail").show();
},
function() {
$(this).parents("li").css("background", "#ededed");
$(this).parents("li").find(".detail").hide();
})
/* 点击删除删除广告 */
$('.del').click(function() {
const self = this;
//询问框
layer.confirm('您是如何确定删除?', {
btn: ['确认','取消'] //按钮
},function(index){
var adverId = $(this).parents("li").find(".adverID").text();
var machineId = '${machine.id }';
console.log(adverId);
$.ajax({
type : "post",
url : "/adver/deleteAdverByMachine.ihtml",
data : {
"adverId" : adverId,
"machineId": machineId
},
async : false,
success : function(data) {
$(self).parents("li").remove();
},
error:function(){
alert("删除失败");
}
})
layer.close(index);
},function(){
});
})
/* 点击删除删除模板 */
$('.moudledel').click(function() {
const self = this;
//询问框
layer.confirm('您是如何确定删除?', {
btn: ['确认','取消'] //按钮
},function(index){
var adverId = $(this).parents("li").find(".adverID").text();
var machineId = '${machine.id }';
var templateId = $(this).parents("li.module").find("span.moduleId").text();
$.ajax({
type : "post",
url : "/adver/deleteAdverByMachine.ihtml",
data : {
"adverId" : adverId,
"machineId": machineId,
'templateId': templateId
},
async : false,
success : function(data) {
$(self).parents("li.module").remove();
},
error:function(){
alert("删除失败");
}
})
layer.close(index);
},function(){
});
})
</script>
</body>
</html>