我在Android上制作移动应用程序,我使用phonegap,mobile jquery ajax codeigniter和mysql。我的登录过程有问题。我的AJAX请求一直都失败了。我在注册过程中使用相同的东西,它的工作原理。它奇怪..这是我在phonegap上的login.html上的代码:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type=text]").val('');
document.addEventListener("deviceready", init, false);
function init() {
$('a[id^="submitButton"]').on('click',function(){
$("#submitButton",this).attr("disabled","disabled");
//$("#loginForm").on("submit",function() {
u = $("#username").val();
p = $("#password").val();
if(u!='' && p!='') {
$.ajax({
url:'http://****.dyndns-home.com/health/index.php/health_login?username='+u+'&password='+p,
dataType:'json',
success:function(data, textStatus, jqXHR)
{
$.mobile.changePage("menu1.html");
if(data.status==1) {
localStorage.setItem("username", u);
localStorage.setItem("password", p);
$.mobile.changePage("menu1.html");
$("input[type=text]").val('');
}
if(data.status==0){
alert("Wrong username or password!");
$("input[type=text]").val('');
}
},
error: function(jqXHR, textStatus, errorThrown){
alert('AJAX request failed');
}
});
}
else{
alert("You must enter a username and password");
}
return false;
});
}
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" >
<h2>Login</h2></div>
<div data-role="content">
<form id="loginForm">
Username: <input type="text" id="username" value="" name="username"/>
Password:<input type="text" id="password" value="" name="password"/>
<a href="forget.html" > Ξέχασες τον κωδικό ή το όνομα χρήστη;</a><br>
<a href="index.html" data-role="button" data-transition="turn" data-inline="true" data-icon="back" >Back</a>
<a href="" id="submitButton" name="submitButton" data-role="button" data-inline="true" data-theme="b" data-icon="forward">Είσοδος</a>
</form>
</div>
<div data-role="footer" data-position="fixed"><h2></h2></div>
</div>
</body>
</html>
另外,当我在chrome和mozzila上运行我的login.html作为web应用程序时,我没有遇到任何问题,ajax请求成功!我用api level 15(android 4.0.3)在eclipse上运行这个应用程序。
告诉我你是否需要我的register.html代码。
你怎么想? 我现在想要解决这个问题2天,我什么也做不了。谢谢!
答案 0 :(得分:0)
打开模拟器的浏览器并键入Internet地址,以验证模拟器是否能够连接到Internet。否则,页面中的JS和CSS将无法加载。
如果模拟器能够在Internet中连接,您可以尝试以下代码。我已经对您的代码进行了一些改进。例如,jQuery框架在同一页面中多次加载。以下代码已在Android中进行过测试。
此外请注意您用于保存凭据的localStorage,存储没有到期日期的数据。您应该考虑使用sessionStorage而不是本地存储。 sessionStorage存储一个会话的数据。
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
/**
* Clears all the inputs in the page.
*/
function clearPageInputs() {
$("input[type=text]").val('');
}
/**
* Trim function
*/
String.prototype.trim = function() {
a = this.replace(/^\s+/, '');
return a.replace(/\s+$/, '');
};
/**
* Submits the login form
*/
function sumbitLoginForm(user, pass) {
if (user.trim() == '' || pass.trim() == '')
{
// fill username and password in Greek language
alert("\u03a3\u03c5\u03bc\u03c0\u03bb\u03ae\u03c1\u03c9\u03c3\u03b5 \u03c4\u03bf Username \u03ba\u03b1\u03b9 \u03c4\u03bf Password!");
}
else
{
$.ajax({
type: 'post',
url: 'http://.../.../...',
data: { username: user, password: pass },
dataType: 'json',
success: function(data) {
if(data && data.status == 1) {
// save in local storage
localStorage.setItem("username", user);
localStorage.setItem("password", pass);
// perform page transition
$.mobile.changePage("menu1.html");
}
else {
clearPageInputs()
// wrong username / password in Greek language
alert("\u0388\u03c7\u03b5\u03b9\u03c2 \u03ba\u03ac\u03bd\u03b5\u03b9 \u03ba\u03ac\u03c0\u03bf\u03b9\u03bf \u03bb\u03ac\u03b8\u03bf\u03c2 \u03c3\u03c4\u03bf Username \u03ae/\u03ba\u03b1\u03b9 \u03c3\u03c4\u03bf Password.");
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + xhr.status + "\n" +
"Message: " + xhr.statusText + "\n" +
"Response: " + xhr.responseText + "\n" + thrownError);
}
});
}
return false;
}
$(document).ready( function() {
clearPageInputs();
$("#submitButton").click(function(){
sumbitLoginForm($("#username").val(), $("#password").val());
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" >
<h2>Login</h2></div>
<div data-role="content">
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" value="" name="username"/>
<label for="password">Password:</label>
<input type="text" id="password" value="" name="password"/>
<a href="forget.html">Ξέχασες τον κωδικό ή το όνομα χρήστη;</a><br>
<a href="index.html" data-role="button" data-transition="turn" data-inline="true" data-icon="back" >Back</a>
<a href="#" id="submitButton" data-role="button" data-inline="true" data-theme="b" data-icon="forward">Είσοδος</a>
</form>
</div>
<div data-role="footer" data-position="fixed"><h2></h2></div>
</div>
</body>
</html>