尝试用jquery mobile做一个简单的web应用程序。我制作了一个简单的日志表单,其中包含要显示的ajax结果。问题是,即使我发出警报查看URL是否有效,我的ajax也不会得到结果。使用jquery mobile有什么特别的事情需要我做吗?
非常感谢您的任何想法/答案!
这是HTML代码:
<div data-role="page" id="login" data-theme="a" data-add-back-btn="true">
<div data-role="header">
<h2>Log in</h2>
</div>
<div data-role="content" data-theme="a" data-add-back-btn="true">
<form action="mobilelogin.php" method="post">
Email: <input type="text" name="email" id="useremail">
Password: <input type="password" name="password" id="userpassword">
<input type="submit" value="Enter">
</form>
<div id="loginresult"></div>
</div>
<div data-role="footer"><h4>Chris Sherwood Design 2012</h4></div>
</div>
Js文件:
$(document).ready(function() {
$('form').submit(function() {
var emailchecker = /^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/;
var email = $("#useremail").val();
var userpassword = $("#userpassword").val();
var checklength = userpassword.length;
if(email == ""){
alert('Please fill in email field');
return false;
}else if(userpassword == ""){
alert('Please fill in password field');
return false;
}else if((!emailchecker.test(email))){
alert('Please use a valid email');
return false;
}else if(checklength < 6 || checklength > 6){
alert('Password must be six characters');
return false;
}else{
var datastring = $(this).serialize();
alert(datastring);
return false;
$.ajax({
type: "POST",
url: "mobilelogin.php",
data: datastring,
success: function(data){
$("#loginresult").html(data);
}
});
}
});
PHP
<?php
echo 'nothing special here...';
?>
从您的代码:
return false;
$.ajax({
type: "POST",
url: "mobilelogin.php",
data: datastring,
success: function(data){
$("#loginresult").html(data);
}
});
您在ajax请求之前返回false。
编辑(假设这是一个简单的错误,添加了更多解释)
您需要移动返回false;到ajax()调用下面,或者使用这样的事件对象:
$('form').submit(function(e) {
e.preventDefault();
只使用return false的问题;就是说,如果在某个东西出现错误之前,它不会停止默认操作。因此,如果您的ajax请求出错,它将错过返回false;并开始加载动作页面。