html页面如何变成jsp页面，如何和后台对接

最新推荐文章于 2024-05-29 18:33:47 发布

笨钟

最新推荐文章于 2024-05-29 18:33:47 发布

阅读量1.8w

点赞数 3

文章标签： jsp

本文链接：https://blog.csdn.net/A_bet_of_three_years/article/details/78607746

版权

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}”
标签外： ${adverList} js中引用：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>