在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";
}
}
