需求：
在登陆界面输入帐号密码，点击登陆按钮之后，在数据库查询账号密码是否正确。正确即登陆成功，错误即无法登陆。
简单分析：
在html页面表单输入账号密码，使用serializeArray()方法获取表单全部信息。在按钮提交事件中通过ajax方式提交到指定url，在controller类中进行接收帐号密码，并通过mybatis技术在数据库中查询是否正确。最后把信息返回到回调函数。
步骤分析：
1、登陆界面login.html
注：form表单id为：newForm，登陆按钮的id是btn_login
这里按钮并没有声明点击事件。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> <!-- 引入thymleaf约束 -->
<head>
<meta charset="UTF-8">
<title>登陆</title>
<script type="text/javascript" src="/js/sys.js"></script> <!-- 引入sys.js资源 -->
</head>
<body style="text-align:center">
<form id="newForm">
<p>用户名：<input type="text" name="username" id="username" value="辛聪明" required><br></p>
<p>密 码：<input type="password" name="password" id="password" value="123" required><br></p>
<p><button type="submit" id="btn_login">登陆</button></p>
</form>
<th:block th:replace="common/include"> <!-- 引入jquery资源 -->
</th:block>
<th:block th:replace="js/login_js"> <!-- 引入login_js，注：放在最底下 -->
</th:block>
</body>
</html>2、login_js页面
注：1、文档就绪事件：$(document)是一个选择器，加载了所有的html资源，$(document).ready 里的代码是在页面内容都加载完才执行的，所以放在login_js最下面
2、文件就绪事件调用了Login.init()方法，在Login.init()方法中主要调用了sys.js中的Sys.initSubmit()方法，并对此方法传递了“提交参数”和“提交方法”。
3、submitParam（）：提交参数、submitHandler：提交方法，具体提交方法内容封装在了 Sys.submitForm()中
"ajaxUrl": "/login.json"-->提交url
<script type="text/javascript">
var Login = function () {
return {
//main function to initiate the module
init: function () {
//初始化事件
this.initEvent();
//初始化提交
Sys
.initSubmit({
//提交参数
submitParam: {
"initForm": function () {
return true;
},
"btnSubmitingVal": "登录中...",
"btnVal":"登录",
"btnId": "btnLogin",
//"ajaxType":"post";
"ajaxUrl": "/login.json",
//"formId" : "newForm",
//"successTip":"操作成功！",
"successCallback": function (resp) {
if (!resp.success) {
$("#spanErrMsg").html(resp.resultMsg);
return;
}
location.href = "/index.html";
}
},
//提交方法
submitHandler: Sys.submitForm
});
},
/**
* 初始化事件
*/
initEvent: function () {
}
};
}();
//加载完毕以后执行
$(document).ready(function () {
Login.init();
});
</script>3、sys.js是封装了提交方法等的JavaScript文件（只展示本节用到的代码）
（1）curParam是形式参数，实际参数是submitParam、submitHandler
（2）$('#' + param.formId) //按钮提交事件，当点击登陆，调param.submitHandler中ajax方式提交数据
.submit(function(){
param.submitHandler(param.submitParam);
});
（3）serializeObject()是自己设置的function，并用$.each()遍历，返回指定表单内所有内容
var Sys = {
initSubmit: function (curParam) {
console.log(JSON.stringify(curParam)); //在浏览器控制台打印出curParam的json格式
var defaultParam = {
formId: "newForm",
rules: {},
submitHandler: function () {
Sys.submitForm(curParam.submitParam);
}
};
var param = $.extend({}, defaultParam, curParam); //将defaultParam, curParam声明为全局变量
var form1 = $('#' + param.formId);
$('#' + param.formId) //按钮的提交事件
.submit(function(){
param.submitHandler(param.submitParam);
});
},
submitForm: function (curParam) {
if (!curParam.ajaxUrl) {
alert("请设置ajaxUrl！");
return;
}
if (!curParam.successUrl && !curParam.successCallback) {
alert("请设置successUrl 或 successCallback！");
return;
}
var defaultParam = {
dialogType: "alert",
btnSubmitingVal: "保存中...",
btnVal: "保存",
btnId: "btnSave",
ajaxType: "post",
formId: "newForm",
// ajaxUrl:"",
// successUrl:"",
successTip: "操作成功!"
};
var param = $.extend({}, defaultParam, curParam);
// alert(JSON.stringify(param));
var postData = JSON.stringify($("#" + param.formId).serializeObject());
if (param.buildData) {
postData = param.buildData();
}
// 调用初始化表单方法
if (param.initForm) {
if (!param.initForm()) {
return;
}
}
//按钮的文本
$("#" + param.btnId).html(param.btnSubmitingVal).attr("disabled", true);
$.ajax({
url: param.ajaxUrl,
type: param.ajaxType,
dataType: "json", //返回json类型数据
contentType: "application/json", //提交数据类型
data: postData, //提交的数据
success: function (resp) { //回调函数，resp是返回的数据
$("#" + param.btnId).html(param.btnVal).removeAttr("disabled");
if (param.successCallback) {
param.successCallback(resp);
return;
}
if (!resp.success) {
// 提示信息
Sys.alert(resp.resultMsg);
return;
}
Sys.alertSuccess({
"successMsg": param.successTip,
"callbackFunc": function () {
location.href = param.successUrl;
}
});
},
error: function (resp) {
// location.href =
// "/admin/err/500.html";
alert(resp.resultCode);
}
});
}
}
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray(); //序列化表单，返回一个array类型
$.each(a, function() { //通过遍历将a数组中数据放在o中
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}4、indexController: 接受数据，处理数据
（1）@RequestMapping(value = {"login.json"}) 对应 "ajaxUrl
（2）loginData.get（"key"）方法得到传递过来json数据中key所对应的value，即得到login.html中输入的帐号和密码
（3）User user = userService.selByName(name); 通过userService服务类的selByName()方法查询帐号在数据库中对应的密码，返回查询到信息封装到user中
package wang.doug.frame.controller;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import wang.doug.frame.common.BaseController;
import wang.doug.frame.common.BaseResult;
import wang.doug.frame.model.User;
import wang.doug.frame.service.UserService;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;
/**
* 登录页面、首页
*/
@Controller
@RequestMapping("/")
public class IndexController extends BaseController {
private static final Log logger = LogFactory.getLog(IndexController.class);
@Resource
UserService userService;
/**
* 登录页面
* @param model
* @return
*/
@RequestMapping(value = {"", "login.html"})
public String toLogin(Model model) {
return "login";
}
/**
* 登录接口
*
* @param model
* @param loginData JSON格式的登录信息，可以使用Java类描述，也可以使用Map
* @return
*/
@RequestMapping(value = {"login.json"})
@ResponseBody
public BaseResult login(Model model, @RequestBody Map<String, Object> loginData
) {
//TODO： 从loginData中获取账号和密码，进行验证，根据验证结果返回信息
//控制类，根据你输入的账号密码与数据库对比
String name=loginData.get("loginName").toString();
String password = loginData.get("loginPwd").toString();
User user = userService.selByName(name);
BaseResult baseResult = new BaseResult();
if (user != null){
if (user.getPassword().equals(password)){
baseResult.setSuccess(true);
}else{
baseResult.setSuccess(false);
}
}
return baseResult;
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
