html页面如何变成jsp页面，如何和后台对接
1.将html页面变成jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<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 machineAdverTemplateList=adverService.getAdverByMac(machineAdverTemplate);
for(MachineAdverTemplate machineAdverTemplate1:machineAdverTemplateList){
AdverTemplateResource adverTemplateResource=new AdverTemplateResource();
adverTemplateResource.setAdverId(machineAdverTemplate1.getAdverId());
//查询模板
List 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"%>
<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">
<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>广告IDspan>
<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>