由於是使用Jquery，所以需要引入Jquery的js文件
在html的頭部<head></head>加上
<script type="text/javascript" src="./js/jquery.min.js"></script>
具體的目錄位置根據你的項目進行改變。
前端的HTML如下：【為了使代碼看起來比較清楚，我將樣式全部都清掉了】
<!--登陸表單--> <label>用戶名</label> <input id="username" type="text" /> <label>密碼</label> <input id="password" type="password"/> <button id="login-button">登陸</button>
public.js【異步提交我寫在這個文件里面】
$(function () { //當登陸按鈕被點擊的時候，異步提交表單 $('#login-button').click(function () {
//獲取到用戶輸入的用戶名和密碼 var usm = $('#username').val(); var psw = $('#password').val(); if (usm == "" || psw == "") { alert("用戶名或者密碼不能為空!"); } else { //異步提交表單 $.ajax({ data: {"username": usm, "password": psw}, type: "POST", url: "/login", success: function (flag) { //接收服務器的數據 }, error : function (flag) { //錯誤處理 } }); } }); });
SpringMVC后台Controller:
@ResponseBody //聲明響應Ajax請求 //聲明請求URL，請求方式，編碼方式【防止亂碼】 @RequestMapping(value = "/login", method = RequestMethod.POST, produces = "text/html;charset=UTF-8;") public String getUser(String username, String password) { //data是JSON對象，類似於Map,可以放入鍵值對，傳到前端 JSONObject data = new JSONObject(); System.out.println("username:"+username+","+password); data.put("state",true); return data.toString(); }
注：這里使用了JSONObject類，這個類的maven依賴為：
<!--JSON支持-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.2</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160810</version>
</dependency>
與此同時，需要在Spring-Servlet.xml中添加
<mvc:annotation-driven/>
對JSON進行支持
如有錯誤，請評論我進行更正。