1.appcan界面（login.html）
假定後臺路徑爲：http://localhost:8080/LabManageSystem/appcan/login/loginHandle.jsp，其中LabManageSystem爲項目名稱，appcan/login爲項目下的文件夾，
loginHandle.jsp就是最裏面login文件夾下的處理appcan用戶名和密碼的JSP文件。
appcan界面（login.html）
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
<link rel="stylesheet" href="login_content/css/main.css">
</head>
<body class="um-vp bc-bg" ontouchstart>
<div class="ub ub-ver ub-f1">
<form method="get" action="http://localhost:8080/LabManageSystem/appcan/login/loginHandle.jsp">
<div class="uba b-gra umar-a uc-a1 c-wh">
<div class="ub ub-ac">
<div class="umhw resuser ub-img umar-l"></div>
<div class="ub-f1 uinput uinn">
<input placeholder="手機/用戶名" id="uid" name="username" type="text" class="uc-a1">
</div>
</div>
</div>
<div class="uba b-gra umar-a uc-a1 c-wh">
<div class="ub ub-ac">
<div class="umhw respwd ub-img umar-l"></div>
<div class="ub-f1 uinput uinn">
<input placeholder="密碼" id="upwd" name="password" type="password" class="uc-a1">
</div>
</div>
</div>
<div class="uin uinn">
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a1" id="submit">
登 錄
</div>
</div>
</div>
<button type="submit"class="uinvisible"></button>
</form>
</div>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
</body>
<script>
appcan.ready(function() {
});
function login() {
var name = $("#uid").val();
var pwd = $("#upwd").val();
if (name == "") {
appcan.window.openToast('賬號不能爲空', '2000');
return;
} else if (pwd == "") {
appcan.window.openToast('密碼不能爲空', '2000');
return;
} else {
$("form").submit();
}
}
appcan.button("#submit", "ani-act", function() {
login();
})
$("form").on('submit', function() {
var name = $("#uid").val();
var pwd = $("#upwd").val();
appcan.ajax({
url : 'http://localhost:8080/LabManageSystem/appcan/login/loginHandle.jsp',
type : 'GET',
data : {
username : name,
password : pwd
},
success : function(data) {
if (data == "1") {//登陸成功
appcan.window.openToast('登陸成功', '2000');
var timer = setTimeout(function() {
appcan.openWinWithUrl('index', 'index.html');
//頁面跳轉
}, 2000);
}else {
appcan.window.openToast('賬號或密碼錯誤！', '2000');
}
}
});
return false;
});
</script>
</html>
後臺處理：loginHandle.jsp
<%@page import="java.io.PrintWriter"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@page import="service.*"%>
<%@page import="service.impl.*"%>
<%@page import="service.exception.*"%>
<%@page import="entity.*"%>
<%@page import="factory.*"%>
<%@page import="rowmapper.*"%>
<%@page import="java.util.*"%>
<%@page import="util.*"%>
<%@page import="java.text.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登錄處理</title>
</head>
<%!private UserService userService = ServiceFactory.getUserService();%>
<%
//設置編碼
request.setCharacterEncoding("utf-8");
PrintWriter pw = response.getWriter();
String username = request.getParameter("username");
String password = request.getParameter("password");
User u = userService.login(username, password);
if (null != u) {
pw.write("1");//登錄成功,標記爲1
}else{
pw.write("賬號或密碼錯誤！");
}
pw.flush();
pw.close();
%>
</html>