用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>
问题 1 的原因是 jQuery Mobile 会替代默认的页面刷新机制,而使用异步技术 (Ajax) 加载新页面,所以需要在页面加载完成后重新绑定事件处理程序。可以使用 jQuery Mobile 提供的 pageinit 事件来重新绑定事件处理程序,类似于 $(document).ready(function() {...}) 的用法。
例如:
$(document).on("pageinit", "#pageId", function(){
alert("ready");
$("#btnLogin").click(function(e){
// code here
});
});
问题 2 的原因是jQuery mobile默认是使用Ajax方式来加载页面,阻止了默认的Form提交方式。可以在点击按钮的时候使用e.preventDefault();阻止默认事件来解决这个问题。
在上面的代码中已经加了e.preventDefault();,提交方式已经转为Ajax方式了。