1 导入页面JS
说明:引入页面JS和编辑页面名称
2 编辑页面JS
<%@ 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> <!--导入函数类库 --> <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script> <!--JS测试 --> <script type="text/javascript"> //让页面加载完成之后执行 $(function() { //1.$.get 2.$.post 3.$.getJSON 只能获取json串 4.$.ajax 万能用法 //1.语法 url地址, data参数 , 回调函数 返回值类型 //type类型:xml, html, script, json, text, _default 会自己解析返回值。 //jQuery.get(url, [data], [callback], [type]) 一般都是json串 $.get("/findAjax2", function(data) { //1.获取返回值信息,之后循环遍历,之后将每个数据获取之后 拼接到table中即可 //关于ajax参数问题 第一个参数 代表下标 ,第二个参数代表遍历的对象 var trs = null; $(data).each( function(index, user) { //[user,user,user....] //var user = data[index]; var id = user.id; //从对象中获取属性信息 var name = user.name; var age = user.age; var sex = user.sex; trs += "<tr align='center'><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td>" + sex + "</td></tr>"; }); //将tr标签追加到table中 $("#tb1").append(trs); }); //2.利用$.ajax方法发起ajax请求 $.ajax({ type : "get", //请求类型 url : "/findAjax", //请求路径 dataType: "json", //指定返回值格式为json串 //data : "name=John&location=Boston", //请求参数 async: false , //表示同步和异步问题. 默认条件下 是异步操作 cache: false , //添加请求缓存 success : function(data) { //回调函数 $(data).each((index,user) => { addrows(user); }); }, error : function(data){ alert("请求失败!!!") } }); //${user.id} el表达式 所以取值为null function addrows(user){ var tr = "<tr align='center'><td>"+user.id+"</td><td>"+user.name+"</td><td>"+user.age+"</td><td>"+user.sex+"</td></tr>"; $("#tb1").append(tr); } }); </script> <title>您好Springboot</title> </head> <body> <table id="tb1" 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> </tr> </table> </body> </html>
3 编辑UserController
package com.jt.demo.controller; import java.util.List; import javax.servlet.http.HttpServletRequest; 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.bind.annotation.RestController; import com.jt.demo.pojo.User; import com.jt.demo.service.UserService; @Controller //返回值结果需要跳转到页面中. 执行视图解析器的代码 //@RestController //返回值的结果返回的是JSON数据(String) 不执行视图解析器业务规范 public class UserController { @Autowired private UserService userService; /** * 需求: 用户通过http://localhost:8090/findAll请求, * 要求: * 1.跳转到userList.jsp页面中 * 2.并且在页面中展现user列表数据. * 页面中的取值 ${userList} * 作业2: * 在userAjax.jsp中,利用ajax异步方式,动态获取用户信息. * 并且在页面中以表格的形式展现. * 0-10: 优秀 * 10-15:优秀- * 15-20良好 * 20+ 不及格 * IDEA 调整启动项的目录加载位置 否则容易报错404 */ @RequestMapping("/findAll") public String findAll(Model model) { List<User> userList = userService.findAll(); model.addAttribute("userList", userList); return "userList"; //跳转页面 } //1.跳转到ajax页面中 @RequestMapping("/userAjax") public String userAjax() { return "userAjax"; } //2.接收ajax用户请求 返回值为userJSON数据 @RequestMapping("/findAjax") @ResponseBody public List<User> findAjax(){ return userService.findAll(); } }