login.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- 规范代码格式xmlns,以便下面使用th-->
<head>
<meta charset="UTF-8">
<title>登录</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="/vendor/sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="/vendor/sweetalert/dist/sweetalert.css">
<!-- 引入外部文件-->
</head>
<body style="text-align: center">
<form id="newForm" onsubmit="return false">
<div>
<input id="loginName" type="text" name="loginName" />
</div>
<div>
<input id="loginPassword" type="password" name="password"/>
</div>
<button type="submit" id="btn_login">登录</button>
<!-- id是这个button唯一标识-->
</form>
<th:block th:replace="/js/login_js3"/>
</body>
</html>
login_js3.html
<script type="text/javascript">
var Login = function () {
return{
init:function () {
Login.initSubmit();
// alert("honey")
},
initSubmit: function () {
// alert("........aaaaaaa")
var defaultParam = {
formId:"newForm"
}
var param = $.extend({},defaultParam)
$('#'+defaultParam.formId).submit(function () {
Login.getLoginData(defaultParam);
})
},
getLoginData: function (curParam) {
// alert("......bbb")
// var a = {};
// //取出数组 所有元素
var b = $('#'+curParam.formId).serializeObject();
// alert(b[0].name+"......"+b[0].value);
// //遍历集合
// $.each(b,function () {
// a[this.name]=this.value;
// // this代表当前循环的object,第一次是[username:ddd],第二次是[userpassword:111]
// });
// alert(JSON.stringify(a));
Login.sendDataToController(b);
},
sendDataToController:function (param){
alert('...sendDataToController')
$.ajax({
url:"/login.json",
contentType:"application/json;charset=UTF-8",
type:"post",
data:JSON.stringify(param),
// dataType:"json",
//回调函数success,目的:得到反馈;定义:自己定义的
success:function (resp) {
alert(".......提交成功"+JSON.stringify(resp))
}
}
})
}
}
}();
$(document).ready(function () {
Login.init();
})
</script>