我們知道在Java Web中，前端的JSP可以使用EL表達式來獲取Servlet傳過來的數據Spring Boot中也有Thymeleaf模板可以使用th: text="${XXX}"來獲取Controller傳過來的值
但是我就是不想要使用thymeleaf，我想使用普通的html，這里呢，使用Ajax向后端獲取數據，先來展示一下最終結果圖吧
先來展示一下后端代碼吧，后端的Controller向數據庫獲取數據，然后以JSON格式傳給前台，但是我懶，哈哈哈，所以我造兩個假數據，以后再寫一個Mybatis+Mysql的例子。先新建一個Java Bean
package com.wechat.main.bean;
/**
* 消息表對應的Java Bean
*/
public class Message {
private String id;
private String command;
private String description;
private String content;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getCommand() {
return command;
}
public void setCommand(String command) {
this.command = command;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
然后新建我們的Controller
package com.wechat.main.controller;
import com.wechat.main.bean.Message;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
/**
* 列表頁面初始化
*/
@Controller
public class ListController {
@ResponseBody
@RequestMapping("/list")
public List<Message> list(){
List<Message> list=new ArrayList<>();
Message message=new Message();
message.setId("1");
message.setCommand("許嵩");
message.setDescription("歌手");
message.setContent("最佳歌手");
Message message1=new Message();
message1.setId("2");
message1.setCommand("蜀雲泉");
message1.setDescription("程序員");
message1.setContent("不斷成長的程序員");
list.add(message);
list.add(message1);
return list;
}
}
@ResponseBody這個注解就是把數據以JSON格式傳走
看看我們的前端吧，我這里用了人家的，還有css，還有圖片，所以比較好看。你們就自己寫一個table湊合用吧
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE" />
<title>內容列表頁面</title>
<link href="css/all.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.0.min.js"></script>
</head>
<body style="background: #e1e9eb;">
<form action="" id="mainForm" method="post">
<div class="right">
<div class="current">當前位置：<a href="javascript:void(0)" style="color:#6E6E6E;">內容管理</a> > 內容列表</div>
<div class="rightCont">
<p class="g_title fix">內容列表 <a class="btn03" href="#">新 增</a> <a class="btn03" href="#">刪 除</a></p>
<table class="tab1">
<tbody>
<tr>
<td width="90" align="right">演示字段1：</td>
<td>
<input type="text" class="allInput" value=""/>
</td>
<td width="90" align="right">演示字段2：</td>
<td>
<input type="text" class="allInput" value=""/>
</td>
<td width="85" align="right"><input type="submit" class="tabSub" value="查 詢" /></td>
<td width="85" align="right"><input type="button" class="tabSub" onclick="refurbishIndex()" value="刷新" /></td>
</tr>
</tbody>
</table>
<div class="zixun fix">
<table class="tab2" width="100%">
<tr>
<th><input type="checkbox" id="all" onclick="#"/></th>
<th>id</th>
<th>指令</th>
<th>描述</th>
<th>操作</th>
</tr>
<tbody id="tbodydata">
</tbody>
</table>
<div class='page fix'>
共 <b>4</b> 條
<a href='###' class='first'>首頁</a>
<a href='###' class='pre'>上一頁</a>
當前第<span>1/1</span>頁
<a href='###' class='next'>下一頁</a>
<a href='###' class='last'>末頁</a>
跳至 <input type='text' value='1' class='allInput w28' /> 頁
<a href='###' class='go'>GO</a>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(function () {
refurbishIndex();
})
function refurbishIndex(){
$.ajax({
type:"post",
url:"/list",
data:{},
async: false,
success:function (data) {
var str="";
for (i in data) {
str += "<tr>" +
"<td>"+"<input type=\"checkbox\" />"+"</td>"+
"<td align='center'>" + data[i].id + "</td>" +
"<td align='center'>" + data[i].command + "</td>" +
"<td align='center'>" + data[i].description + "</td>" +
"<td>\n" +
"<a href=\"#\">修改</a>\n" +
"<a href=\"#\">刪除</a>\n" +
"</td>"
"</tr>";
}
document.getElementById("tbodydata").innerHTML=str;
}
});
}
</script>
大功告成
僅僅是這樣還不夠，我們怎么能造假數據呢？應該使用數據庫的數據，使用Mybatis。而且，我上面的兩個查詢框也應該可以用，也就是Ajax獲取數據的時候，要傳參數
答案就是下一篇文章：https://www.cnblogs.com/yunquan/p/10398626.html