在SSM和springboot的工具上呈現
本博客只顯示WEB-INF的頁面和Controller層的內容，展現從數據庫中查詢的數據怎麼展示在html和jsp頁面中，jsp的本質是servlet，使用out.write()變成html，所以html的頁面不在敘述。
一、jsp中要使用jstl和el表達式來獲取Controller裏面封裝的在model裏面的數據
userList.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JSTL和EL的練習</title>
</head>
<body>
<table border="1px" width="65%" align="center">
<tr>
<td colspan="6" align="center"><h3>學生信息</h3></td>
</tr>
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th></th>
</tr>
<%
//聲明一個數組, 並將數組存入域中
String[] names = {"栓上線","咚咚","緩緩"};
request.setAttribute("names", names);
%>
<%-- <%
UserServiceImpl userService = new UserServiceImpl();
List<User> userList = userService.findAll();%> --%>
<c:forEach items="${names}" var="name">
${ name }
</c:forEach>
<c:forEach items="${userList}" var="u">
<tr>
<th>${u.id}</th>
<th>${u.name}</th>
<th>${u.age}</th>
<th>${u.sex}</th>
</tr>
</c:forEach>
</table>
</body>
</html>
二、jsp中使用Ajax來獲取後端的list數據，或者vo對象，並且利用each遍歷list裏面的內容，添加到頁面上。
ajax.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ajax</title>
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<table id="tab" border="1px" width="65%" align="center">
<tr>
<td colspan="6" align="center"><h3>學生信息</h3></td>
</tr>
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th></th>
</tr>
</table>
<!-- 實現函數調用 -->
<script type="text/javascript">
//讓頁面加載完成之後開始運行js
$(function(){
alert("稀罕你");
//常見的ajax請求方式$.get(url,data,callback,type){}
$.post("/ajax",function(result){
alert("稀罕你111");
var tr = null;
console.log(result);
$(result).each(function(index,user) {
//var user = result[index];
var id = user.id;
var name = user.name;
var age = user.age;
var sex = user.sex;
tr += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+
age+"</td><td>"+sex+"</td></tr>";
});
//將tr標籤添加到table
$("#tab").append(tr);
});
/* ajax基礎版本
data格式常見2種
1.js格式{key:value}
2.字符串格式 表單序列(大量數據 serialize 查看文檔)化格式化後 id=1&name=tom&xxx=xxx
*/
/* $.ajax({
type: "get",//請求類型
url: "/findAll-ajax",
//data: "{id:100}", //提交的參數
dataType: "json", //返回值類型
async: false, //設定同步異步
success: function(result){
alert("回調函數成功時執行!!!");
},
error: function(result){
alert("當ajax請求報異常時執行");
}
}); */
/* $.get(url,data,callback,json)
$.getJSON(url,data,callback){
} */
})
</script>
</body>
</html>
UserController.java
package com.jt.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.support.RequestContext;
import com.jt.dao.UserMapper;
import com.jt.pojo.User;
import com.jt.service.UserService;
@Controller
@RequestMapping("/")
public class UserController {
@Autowired
private UserService userService;
//localhost/userList
@RequestMapping("userList")
public String userList(Model model) {
List<User> userList = userService.findAll();
model.addAttribute("userList",userList);
/*
* 其實ModelAndView被拆分成了Model 和view
* ModelAndView modelAndView = new ModelAndView();
* List<User> userList =
* userService.findAll();
* modelAndView.addObject("userList", userList);
* modelAndView.setViewName("userList");
*/
return "userList";
}
/*接收ajax數據
* url:http://localhost:80/findAjax
* data:null
* 返回值：userList的json數據
*/
@RequestMapping("/ajax")
@ResponseBody
public List<User> findAjax() {
return userService.findAll();
}
/*localhost/toAjax*/
@RequestMapping("toAjax")
public String toAjax() {
return "ajax";
}
}