只是自我總結,總結有所不對的請大家積極糾正,小弟將備受感激。
最近寫的是前後端一體化項目,後端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標籤大家要正確使用即可。