標籤：|| pass 代碼 get com 樣式 public font src
由於是使用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進行支援
如有錯誤，請評論我進行更正。
用SpringMVC和Jquery的Ajax進行非同步提交表單
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
