簡單web網頁與SSM后台交互
情況說明
如今，已經搭建好SSM后台開發環境，並且可以經由postman工具測試成功。現在嘗試寫出web前端網頁，通過實現簡單的提交、注冊、查詢功能來加深對前后端數據傳輸格式、接口設置等理解。
編程思路
大體的思路得正確，為實現以上需求，首先需要確定的是，主要編寫簡單網頁的方式是通過js實現點擊按鈕向后台發送get或post請求。
實現結果
由於筆者前端js語言應用經驗較少，首先在網上找到簡單網頁的代碼模板，如下：
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript" src="submit.js"></script>
</head>
<body>
<form name="myform" method="post">
<label for="user">用戶名</label>
<input type="text" id="user" name="user" value="d">
<br />
<label for="password">密碼</label>
<input type="password" id="password" name="password" value="d">
<br />
<label for="user">原名</label>
<input type="realName" id="realName" name="realName" value="lallll">
<br />
<input type="button" id="submit" name="submit" value="登錄" onclick="Submit()">
<input type="button" id="signUp" name="signUp" value="注冊" onclick="SignUp()">
<br />
<label for="user">用戶id</label>
<input type="text" id="userId" name="userId" value="6">
<br />
<input type="button" id="query" name="query" value="查詢" onclick="Query()">
</form>
</body>
整個代碼結構還是比較清晰的，就是最基本的html結構，需要注意的是在head部分引入了兩個src。針對以上代碼做一點說明：
- 其中一個是在線引用jQuery。jQuery是一個快速、簡潔的JavaScript框架。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。總而言之，jQuery可以幫助你更加方便的實現js發送get或post請求
- 另外一個是引入submit.js。submit.js是另一個文件，主要負責具體實現get或post請求。
- 在input/button標簽或者需要發送數據的地方，增加一個onclick的屬性，這些方法在submit.js中實現。
submit.js
function Submit() {
console.log($('#user').val(),$('#password').val());
var jsonData={
"userId":4,
"userName":$('#user').val(),
"passWord":$('#password').val(),
"realName":"d"
}
$.ajax({
type: "POST",
dataType: "json",
url: "http://localhost:8889/user/enterUser",
contentType: 'application/json',
data: JSON.stringify(jsonData),
success: function () {
alert('Bingo!')
},
error: function () {
alert("Bad！");
submitted = false;
}
});
}
function Query() {
console.log($('#userId').val());
$.ajax({
type: "GET",
url: "http://localhost:8889/user/getUser/"+$('#userId').val(),
success: function (data) {
alert(data.userId+" "+data.userName +" "+data.passWord+" "+data.realName)
alert("Bingo!")
},
error: function () {
alert("Bad");
}
});
}
//注冊功能測試時，需要改一下用戶名（相同用戶名不能再注冊）
function SignUp() {
console.log($('#userId').val());
var jsonData={
"userName":$('#user').val(),
"passWord":$('#password').val(),
"realName":$('#realName').val()
}
$.ajax({
type: "POST",
url: "http://localhost:8889/user/addUser",
dataType: "json",
contentType: 'application/json',
data: JSON.stringify(jsonData),
success: function () {
alert("Bingo!")
},
error: function () {
alert("Bad");
}
});
}
對以上代碼做幾點說明：
- 以上三個方法的實現有很多相似之處，大體框架是一樣的。
- 編程小技巧：console.log($('#userId').val())可以把需要觀察的值寫在日志里，在瀏覽器端F12就可以在控制台看到
- 針對具體運行結果是走success還是error，主要看發送get或post請求后，后台返回的狀態碼(是OK還是NOT_FOUND)。另外success中function括號中可能包含的data只是接受返回的數據，名字無所謂的。比如Submit.js對應的后台登錄代碼：
//返回類型是ResponseEntity(可以添加HttpStatus狀態碼)
@RequestMapping(value="enterUser", method={RequestMethod.POST, RequestMethod.GET})
public ResponseEntity<User> EnterUser(@RequestBody User user){
System.out.println(user);
User check_userName = userService.check(user);
if (check_userName == null)
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
return new ResponseEntity<>(userService.EnterUser(user), HttpStatus.OK);
}
bug說明(本次練習遇到兩次靠自己沒能解決的bug，好在得到師兄的幫助解決了)
- 首先的問題是碼完test.html和submit.js后，雙擊test.html運行，結果在chrome上顯示如圖：
在Firefox上顯示如圖：
可以得到結論，火狐瀏覽器在開發者角度上很不錯，尤其在針對國內開發者。兩個瀏覽器都顯示是跨域請求出現了問題，在網上找了一遍，很多解決辦法，但是好像都挺復雜的。嘗試了其中一種，安裝chrome插件 Allow-Control-Allow-Origin: *，同樣也給Firefox安上插件，然並卵。
最終解決辦法是把test.html和submit.js放到后台框架SSM的resource資源文件中(如此便在一個域中)，如此在瀏覽器端輸入localhost:8889/test.html即可訪問成功
- 第二個bug是在碼完Query方法時出現，無法正常返回user信息。找了半天，不知道問題在哪。
最終解決辦法是發現是后台出現了問題，后台並沒有返回user對象，而是簡單返回了一個字符串。所以前后端對接乃至接口設置都至關重要。<后台背鍋呀！>