Ajax實現使用者資訊呼叫
阿新 • • 發佈：2020-08-01
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]; varid = 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(); } }