用jquerymobile写了一个登陆页面,后台是spring3+mybatis,主要的思路是异步提交验证,如果验证失败,直接在页面上提示错误信息,验证成功则通过changePage刷新页面。
遇到的问题是:
1、在spring的controller中返回这个页面后,登录页面虽然展现出来了,但是$(document).ready(function() {...})没有起作用,手工强制刷新页面可以起作用;
2、Ajax的POST方式没有起作用,点击按钮总是GET方式。。。
页面代码如下,请各位大侠帮看下,真心感谢!
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<title>login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function onSuccess(data, status) {
data = $.parseJSON(data)
//data = $.trim(data);
if(data.flag == "Y") {
//成功,进入新页面
$.mobile.changePage(data.url);
} else {
$("#message").css("color", "#ff0000");
$("#message").text(data.msg);
}
}
$(document).ready(function() {
alert("ready");
$("#btnLogin").click(function(e){
var formData = $("#frmLogin").serialize();
alert(formData);
$.ajax({
type: "POST",
url: "${ctx}/login",
cache: false,
data: formData,
success: onSuccess
});
e.preventDefault();
});
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div id="message"></div>
<form id="frmLogin">
<label for="memberId">会员ID:</label>
<input name="memberId" id="memberId" data-mini="true" data-clear-btn="true" type="text" autofocus required>
<label for="password">密码:</label>
<input name="password" id="password" data-mini="true" type="password" autofocus required>
<br/>
<div align="center">
<input value="提交验证" id="btnLogin" type=submit data-inline="true" data-mini="true" data-icon="check" data-theme="b">
<!--
<input value="重 填" type="reset" data-inline="true" data-mini="true" data-icon="delete" data-theme="b">
-->
</div>
</form>
</body>
</html>