<!DOCTYPE html>
<html>
<head>
<title></title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<!--<link rel="stylesheet" type="text/css" href="/css/normalize.css">-->
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type='text/javascript'>
$(document).on('pageinit', function () {
//$.support.cors =true,
//$.mobile.allowCrossDomainPages = true;
$('#frmLogin').validate({
rules: {
username: {
required: true
},
password: {
required: true
}
},
messages: {
username: {
required: "Please enter your username."
},
password: {
required: "Please enter your password."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form) {
//alert('there doesn't exist a valid url as yet');
$("#frmLogin").submit(function (event) {
//event.preventDefault();
var credentials = { username: $("#username").val(), password: $("#password").val() };
$.ajax({
type: "POST",
url: "api/auth", // this url is just a placeholder
cache: false,
data: JSON.stringify(credentials),
contentType: "application/json; charset=utf-8",
success: function(data,status,jqxhr)
{
//validate the response here, set variables... whatever needed
//and if credentials are valid, forward to the next page
if (data.status == "success")
{
var obj = $.parseJSON(data);
localStorage.setItem("acccessToken", obj.accessToken);
alert(obj.accessToken);
//authUsername = $("#username").val();
//var encrytPswd = mm.crypt.encrypt('sha1', $("#password").val());
//localStorage.setItem(authUsername, encrytPswd);
//localStorage.setItem('authUsername', authUsername);
//localStorage.setItem('authPassword', encrytPswd);
//mm.page.show('configuration', {});
//$.mobile.changePage($("#main_page"));
//window.location.href = "http://www.jqueryvalidation.org";
}
else if(data.status== "error")
{
alert("Authentication Invalid.Please try again!");
return false;
}
//or show an error message
},
error: function (jqxhr, status, errorMsg)
{
// server couldn't be reached or other error
alert("jqXHR Status : " + jqxhr.status + " Status: " + status + " Error: " + errorMsg);
}
}, "json");
return false;
});
//$(':mobile-pagecontainer').pagecontainer('change', '#success', {
// reload: false
//});
}
});
});
</script>
<style type="text/css">
label.error {
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
float: none;
}
@media screen and (orientation: portrait){
label.error { margin-left: 0; display: block; }
}
@media screen and (orientation: landscape){
label.error { display: inline-block; margin-left: 22%; }
}
em { color: red; font-weight: bold; padding-right: .25em; }
</style>
</head>
<body id="loginBody">
<div data-role="page" id="login">
<div data-role="header">
</div>
<div data-role="content">
<a id="main_page" href="www.google.com"></a>
<form id="frmLogin" method="post" action="api/auth" data-ajax="false">
<div data-role="fieldcontain">
<label for="username">
<em>* </em> Username:
</label>
<input type="text" id="username"
name="username" />
</div>
<div data-role="fieldcontain">
<label for="password">
<em>* </em>Password:
</label>
<input type="password" id="password"
name="password" />
</div>
<div class="ui-body ui-body-b">
<button class="btnLogin" type="submit" id="loginBtn"
data-theme="a">
Login
</button>
</div>
</form>
</div>
<div data-role="page" id="success" data-theme="b">
<div data-role="header">
<h1>Thank You!!!</h1>
</div>
</div>
</div>
</body>
</html>
每当我点击按钮在表单上触发submit事件，并且假设我发布请求的网址不存在，那么它应该执行以下功能：
error: function (jqxhr, status, errorMsg)
{
// server couldn't be reached or other error
alert("jqXHR Status : " + jqxhr.status + " Status: " + status + " Error: " + errorMsg);
}
它确实如此，但是我必须单击两次按钮，为什么不单击上面的功能就执行了？