只是自我总结，总结有所不对的请大家积极纠正，小弟将备受感激。
最近写的是前后端一体化项目,后端springboot，前端是themleaf。
首先说iframe标签，
<div class="right">
<iframe scrolling="auto" id="right" rameborder="0" src="/text/textList" name="right" width="100%" height="100%"></iframe>
</div>
@RequestMapping("text")
@Controller
@Api(description = "文章API",tags = "文章API")
public class SysTextController extends UploadController {
@RequestMapping("/textList")
@ApiOperation(value = "去栏目管理页面", notes = "栏目管理", produces = "application/json")
public String columnTable() {
return "text/textList";
}
}
将会进入我的
这个页面中。
而textList.html又会作为行内框架放入iframe标签中。
1、 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
下面说一下我的textList.html页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/pintuer.css">
<link rel="stylesheet" href="../css/admin.css">
<script src="../js/jquery.js"></script>
<script src="../js/pintuer.js"></script>
</head>
<script type="text/javascript">
$(function(){
console.log(1)
queryList();
});
function queryList(){
console.log(2)
var textTitle=$("#textTitle").val();
$.ajax({
url:"/text/list", //配置请求的路径
dataType:"text", // 期待返回值类型
data:{
"textTitle":textTitle
},//传送的数据
async:true, //是否开启异步加载
success:function(dada){ //成功回调函数
$("#div").html(dada);
},
error:function(){//失败回调函数
alert("请求失败");
}
});
}
</script>
<body>
<div class="padding border-bottom">
<ul class="search" style="padding-left:10px;">
<li> <a class="button border-main icon-plus-square-o" href="http://localhost:3333/text/textList"> 重置</a> </li>
<li>栏目搜索：</li>
<li>
<input type="text" placeholder="请输入搜索关键字" id="textTitle" name="keywords" class="input" style="width:250px; line-height:17px;display:inline-block" />
<a href="javascript:void(0)" class="button border-main icon-search" onclick="queryList()" > 搜索</a></li>
</ul>
</div>
<div id="div"></div>
</body>
</html>
$("#div").html(dada);，这时候我们就来说一下jquery中的html()方法。
请求路径： url:"/text/list",
@RequestMapping("text")
@Controller
@Api(description = "文章API",tags = "文章API")
public class SysTextController extends UploadController {
@GetMapping(value = "/list")
@ApiOperation(value = "分页查询文章", notes = "分页查询", produces = "application/json")
public String textList(Model m, @ApiParam(value = "分页信息") PageParam pageParam, @ApiParam(value = "筛选条件") SysText sysText) {
List<SysText> list = sysTextService.list(pageParam, sysText);
PageInfo pageInfo = new PageInfo(list);
m.addAttribute("pageInfo",pageInfo);
return "text/textTable";
}
}
之后进入到我的textTable.html页面
看下textTable.html中的内容
<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>网站信息</title>
<!--<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
<link rel="stylesheet" href="../css/pintuer.css">
<link rel="stylesheet" href="../css/admin.css">
<script src="../js/jquery.js"></script>
<script src="../js/pintuer.js"></script>
<!-- <script src="../bootstrap/bootbox-4.4.0/bootbox.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
</head>
<body>
<!--<style>
.pageNumber{
width: 100%;
/*display: flex;*/
/*margin: 0 auto;*/
/*height: 300px;*/
/*background: red;*/
text-align: center;
}
</style>-->
<div class="panel admin-panel">
<div class="panel-head"><strong class="icon-reorder">文章列表</strong></div>
<div class="padding border-bottom">
<a class="button border-yellow" href="/text/toadd"><span class="icon-plus-square-o"></span> 新增</a>
</div>
<table class="table table-hover text-center">
<tr>
<!--<th width="5%">ID</th>-->
<input type="hidden" th:value="ID" />
<th>文章标题</th>
<th>文章内容</th>
<th>主图展示</th>
<!--<th>所属栏目ID</th>-->
<input type="hidden" th:value="所属栏目ID"/>
<th>创建时间</th>
<th width="250">操作</th>
</tr>
<tr th:each="c:${pageInfo.list}">
<!--<td th:text="${c.id}"></td>-->
<input type="hidden" th:value="${c.id}" />
<td th:text="${c.textTitle}"></td>
<!-- <td th:text="${c.textContent}"></td>-->
<td><button type="button" class="button border-main" th:value="${c.id}" onclick="preview(this)" ><span class="icon-edit"></span>预览</button></td>
<td><img alt="图片正在加载" th:src="${c.photoUrl}" width="60px"></td>
<input type="hidden" th:value="${c.columnId}"/>
<!--<td th:text="${c.columnId}"></td>-->
<!--<td th:text="${c.createTime}"></td>-->
<td th:text="${#dates.format(c.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
<td>
<div class="button-group">
<button type="button" class="button border-main" th:value="${c.id}" onclick="upd(this)" ><span class="icon-edit"></span>修改</button>
<button type="button" class="button border-red" onclick=" del(this)" th:value="${c.id}"><span class="icon-trash-o"></span>删除</button>
</div>
</td>
</tr>
</table>
</div>
<script>
function del(obj){
var id=$(obj).val();
if(confirm("您确定要删除吗?")){
//location.href="http://localhost:3333/text/delete?id="+id
location.href="/text/delete?id="+id
}
}
function upd(obj){
var id=$(obj).val();
location.href="/text/detail?id="+id
}
function preview(obj){
var id=$(obj).val();
location.href="/text/preview?id="+id
}
</script>
</body>
</html>
这时候html方法就起到作用了，textTable.html就会放入我的div标签中。
总之html()方法 与 iframe标签大家要正确使用即可。
这辈子坚持与不坚持都不可怕，怕的是独自走在坚持的道路上！！！
欢迎加入技术群聊。
