html5页面如何转为jsp,html页面如何变成jsp页面，如何和后台对接

1.将html页面变成jsp页面

pageEncoding="utf-8"%>

2.如何接收数据进行显示

cellspacing="0">

广告ID:广告名称:

style="border-top: 1px solid #dadada;">

value="查询">

name="button" class="btn btn82 btn_search" value="重置">

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

${adver['adverId']}

${adver['adverName']}

查看

删除

1. ${template['id'] }

   ${template['adverTemplateName'] }

   删除

没有搜索到相关数据

请求数据

/* 点击删除删除模板 */

$('.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代码

pageEncoding="utf-8"%>

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; */

}

用户信息管理

cellspacing="0">

广告ID:广告名称:

style="border-top: 1px solid #dadada;">

value="查询">

name="button" class="btn btn82 btn_search" value="重置">

• 广告ID

  广告名称

  操作

• ${adver['adverId']}

  ${adver['adverName']}

  查看

  删除

  1. ${template['id'] }

     ${template['adverTemplateName'] }

     删除

• 没有搜索到相关数据