IDEA Maven+SpringMVC+Mybatis HTML+Ajax MySql Tomcat登錄Demo（二）
- 開發工具：IDEA
- 前端技術：HTML+JQuery+Ajax
- 後端技術：Maven+SpringMVC+MyBatis
- 數據庫：MySql
本節內容記錄了SpringMVC項目登錄前端內容
一、創建前端各路徑
創建前端文件目錄，和所需文件，jquery文件需要去官網下載，複製到js下。
二、index.html、loginh.css、loginh.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄</title>
<link rel="stylesheet" href="./css/loginh.css">
</head>
<body>
<div class="loginbody">
<div id="content"></div>
<div class="logindata">
<h3>AJAX登錄頁</h3>
<br/>
賬號:
<input type="text" name="uname" id="uname" title="姓名"/>
<br/>
密碼:
<input type="text" name="upwd" id="upwd" title="密碼"/>
<br>
<br>
<input type="submit" value="註冊" id="register">
<input type="submit" value="登錄" id="login">
<input type="submit" value="查看用戶數據" id="select">
</div>
<form action="/loginForm" method="post">
<h3>Form登錄</h3>
<br/>
賬號:
<input type="text" name="uname" title="姓名"/>
<br/>
密碼:
<input type="text" name="upwd" title="密碼"/>
<br>
<input type="submit" value="登錄">
</form>
<form action="/fromRegister" method="post">
<h3>Form註冊頁</h3>
<br/>
賬號:
<input type="text" name="uname" title="姓名"/>
<br/>
密碼:
<input type="text" name="upwd" title="密碼"/>
<br>
<input type="submit" value="註冊">
</form>
<form action="/fromSelect" method="post">
<h3>from查詢數據</h3>
<br>
<input type="submit" value="from查詢ALLUser數據">
</form>
</div>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/loginh.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
loginh.css
*{
padding: 0px;
margin: 0px;
}
.loginbody {
width: 100%;
height: 50%;
}
.logindata {
width: 500px;
height: 200px;
margin: 20px auto;
text-align: center;
border: 3px inset seagreen;
}
loginh.js (不完整、後續繼續開發)
$(document).ready(
$("#login").click = function () {
console.log("登錄處理")
var uname = $("#uname").val();
var upwd = $("#upwd").val();
var sendMsg = {
uname: uname,
upwd: upwd
};
console.log("登錄處理請求信息：" + JSON.stringify(sendMsg));
$.ajax({
url:"",
type:"",
data:JSON.stringify(sendMsg),
contentType:"",
success:function (json) {
var resCode = json.rescode;
var resDesc = json.resdesc;
var ext = json.ext;
if(resCode==00){
alert("登錄成功");
}else{
alert(resCode+resDesc);
}
},
error:function (xmlhttp,errorText) {
}
});
},
$("#register").click = function () {
console.log("登錄處理");
},
$("select").click = function () {
console.log("登錄處理");
}
)
三、啓動測試查詢
啓動Tomcat
可能會遇到css、js攔截日誌系那是404
需要做如下配置：
在applicationContext.xml中配置
beans體中
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources/ directory -->
<mvc:resources mapping="/css/**" location="/WEB-INF/css/"/>
<mvc:resources mapping="/js/**" location="/WEB-INF/js/"/>
<!--靜態資源訪問-->
點擊後返回數據接收成功了！
下一節，記錄數據Model的學習記錄，最後一節將整體拼接邏輯。