springboot + ajax 簡單互動
阿新 • • 發佈:2018-12-03
專案結構如圖所示,由於沒有使用thymeleaf模版所以刪掉了資料夾:
前端頁面程式碼:
登入頁:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button type="button">提交</button> </body> <script type="text/javascript" src="/js/jquery-3.3.1.js"></script> <script type="text/javascript"> //獲取basePath,測試的話就能用就完了 var obj = window.document.location; var BASE_PATH = obj.href.substring(0, obj.href.indexOf(obj.pathname)); //請求傳參模擬 var username = "root"; var password = "123456"; $("button").on("click", function () { $.ajax({ url: BASE_PATH + "/login/" + username + "/" + password, type: "get", success: function f(data) { console.log(data); debugger; window.location.href = BASE_PATH + "/view/user/index.html"; } }) }); </script> </html>
登入後的列表頁:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="username" readonly="readonly"> <input id="password" readonly="readonly"> </body> <script type="text/javascript" src="/js/jquery-3.3.1.js"></script> <script type="text/javascript"> //獲取basePath,測試的話就能用就完了 var obj = window.document.location; var BASE_PATH = obj.href.substring(0, obj.href.indexOf(obj.pathname)); //請求渲染模擬 $.ajax({ url: BASE_PATH + "/list", type: "get", success: function f(data) { $("#username").val(data.username); $("#password").val(data.password); } }) </script> </html>
注意引入的靜態資源路徑,springboot預設讀取static下的檔案,所以你只需寫出相對於static資料夾的相對路徑即可
後端Controller程式碼:
package com.example.demo.controller; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; import java.util.HashMap; /** * @ClassName HelloController * @Description TODO * @Author Rock-PC5 * @Date 2018/9/13 9:02 * @Version 1.0 **/ @RestController public class HelloController { //模擬使用者登入驗證 @RequestMapping(value = "/login/{username}/{password}",method = RequestMethod.GET) public Object login(@PathVariable String username,@PathVariable String password){ System.out.println(username); System.out.println(password); return "success"; } //模擬現實使用者資訊 @RequestMapping(value = "/list") public Object list(){ String username = "root"; String password = "123456"; HashMap<Object, Object> objectObjectHashMap = new HashMap<>(1); objectObjectHashMap.put("username",username); objectObjectHashMap.put("password",password); return objectObjectHashMap; } }
@RestController主要起到@Controller + @ResponseBody的作用
它使得整個Controller的每一個方法都返回json資料,因為個人感覺jsp有些慢,現在的h5都是先載入頁面再渲染資料,所以跳轉頁面的工作並不需要你來做,交給前端就好。
@RequestMapping主要起到設定請求路徑的作用
value為請求路徑,請求路徑就是我們常說的介面,本測試的介面符合restful風格,這麼寫的原因就是看起來簡潔高大上;
method為請求型別,請求型別常用的有get、post,不常用的有delete、options、put、head、patch等等,如果以後要做tomcat options禁用,會把不常用的都禁用掉,如果你沒有接觸過,就只用get和post就行。
@PathVariable主要起到取請求路徑中的引數的作用
它後面的引數名必須要與路徑中{}裡的引數名一致,不然會報錯,否則你可以使用@PathVarible裡的引數value來繫結路徑中的引數,大概長這個樣子:
@PathVariable(value = "username") String newUsername
現在我們來測試一下,static下的東西都能直接訪問,所以我們直接訪問http://localhost:8080/view/login.html,注意別加static,效果就是一個提交按鈕,現在我們點選這個提交按鈕:
看看後端,引數已經成功傳到後端了:
然後就是渲染頁面: