Springboot ajax非同步互動中相關問題
阿新 • • 發佈：2019-02-08
問題產生：
對於頁面（如登入）提交的資訊，不能用get方式，需要用post方式來將相關陣列放入到請求體裡。
但是因為使用的是Restful API,所以對於驗證後，會直接返回json格式資料。（只有get方式才能返回檢視，post返回不了，會報錯）
所以應該是返回資料後，前臺根據返回的資料展示，或是根據返回的狀態碼（服務端可以任意傳一個）跳轉到相應頁面。
然後這裡，前臺的頁面ajax請求，一定不能用 form表達的submit事件。就是一定不能用提交的方式，JQuery的ajaxForm方法也不可以，因為其底層還是submit事件，只要是submit它提交後就會跳轉，然後服務端返回的是json資料，它就會跳轉到顯示json格式的頁面。
這裡要用按鈕的事件，來發送一個ajax請求，用serialize()方法將form表達中的資訊封裝好，傳送到服務端，然後根據服務端返回的資料彈出相應的提示。
前臺頁面：
<!DOCTYPE html> <html> <head> <script src="webjars/jquery/3.1.1/jquery.min.js"></script> <script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> $(function(){ $('#liu').click(function(){//點選按鈕提交 alert("1"); //要提交的表單id為form1 $.ajax({ url:"loginPost", data:$("#myForm").serialize(), type:"post", success:function(data){//ajax返回的資料 alert(data.id+data.name); } }); alert("2"); }); }); </script> <link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" /> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h2>hello zhangyan</h2> <!--<form id="myForm" onsubmit="mySubmit()" method="post">--> <form id="myForm" method="post" action="loginPost"> <input type="text" value="使用者名稱"/> <input type="text" name="username" id="username" value="zhangyan"/> <input type="text" value="密碼" /> <input type="password" name="password"/> <button type="button" class="btn-warning" id="liu">基本按鈕</button> </form> <div class="container"> <h2>Button</h2> <p>.btn 類是按鈕的基本樣式:</p> </div> </body> </html>
程式碼地址為：https://github.com/liuzhi0716/SpringbootALLpackage com.ecnu.back.controller; import com.ecnu.model.HelloEntity; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.*; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @Controller public class BackIndexController { @RequestMapping(value = "/index",method = RequestMethod.GET) public String index() { System.out.print("index"); return "backindex.html"; } @GetMapping(value = "/login") public String login() { return "backlogin.html"; } @PostMapping(value = "/loginPost") @ResponseBody public HelloEntity loginPost(ModelMap modelMap, @RequestParam("username")String name, @RequestParam("password")String pswd) throws ServletException, IOException { HelloEntity helloEntity = new HelloEntity(2,"liuzhi"); System.out.print( name); System.out.print(pswd); System.out.print("sucesss1"); modelMap.addAttribute("hello",1); return helloEntity; //return "backlogin.html"; } }
裡面還附加了一個ajax的別人的程式碼zip壓縮的。
參考連結：http://bbs.csdn.net/topics/390651787?page=1
裡面的四樓的答案。
別人程式碼的原文連結：http://blog.csdn.net/oppo5630/article/details/52093898