html页面如何变成jsp页面，如何和后台对接
来源：互联网 发布：javascript获取子元素 编辑：程序博客网 时间：2024/06/09 13:12
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=”
标签外：
获取到json数据中的某个值利用
如何寻找到 后台定义的变量名的值？
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>阅读全文
0 0
- html页面如何变成jsp页面，如何和后台对接
- 将所有的.jsp动态页面变成.html静态页面
- 如何发布jsp页面
- Jsp页面如何集合List传递到后台控制端
- [Web2.0]html页面如何通过js加载后台信息
- MyEclipse如何支持可视化设计HTML和JSP页面和snippets
- 如何使用html页面和aspx页面接收参数
- mycncart后台如何新增页面
- JavaScript脚本语言简介及如何嵌入html/jsp页面
- jsp页面中的html：radio 如何struts传递
- 在jsp页面中如何输出html语句
- JSP和HTML关闭页面
- JSP和HTML关闭页面
- jsp页面如何显示图片
- jsp如何实现页面跳转
- 如何静态化JSP页面
- JSP页面如何传递参数
- Struts2如何传值到jsp页面
- 第一个博客记录成长
- EA&UML日拱一卒-多任务编程超入门-（6）小人国里的积木山
- Samba配置文件常用参数详解
- springmvc常用注解详解
- map例子：魔法咒语问题
- html页面如何变成jsp页面，如何和后台对接
- OSI 模型与TCP/IP
- web混合开发
- 初识Hibernate(三)之多表关系维护
- 沐枫NOI 2842. 图书管理员（2017年普及组2） 暴力
- Hadoop RPC框架简单理解
- JAVA 用于练手的超简单登录注册，jdbc实现【学习笔记】
- HDOJ Max Sum JAVA 1003
- JavaScript对话框
