Android 使用Phonegap AJAX登录移动应用程序
我正在android上制作一个移动应用程序，我使用phonegap、移动jquery ajax codeigniter和mysql。我的登录过程有问题。我的AJAX请求一直失败。我在我的注册过程中使用了同样的东西，而且它是有效的。真奇怪。。这是我在phonegap的login.html上的代码：Android 使用Phonegap AJAX登录移动应用程序,android,ajax,cordova,login,Android,Ajax,Cordova,Login,我正在android上制作一个移动应用程序，我使用phonegap、移动jquery ajax codeigniter和mysql。我的登录过程有问题。我的AJAX请求一直失败。我在我的注册过程中使用了同样的东西，而且它是有效的。真奇怪。。这是我在phonegap的login.html上的代码： <!DOCTYPE html> <html> <head> <title>Login</title>
<!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>
登录
$（文档）.ready（函数（）{
$（“输入[类型=文本]”）.val（“”）；
文件。附录列表（“DeviceRady”，初始，错误）；
函数init（）{
$（'a[id^=“submitButton”]'）。在（'click'，function（）上{
$（“#提交按钮”，此）.attr（“禁用”、“禁用”）；
//$（“#loginForm”）。在（“提交”，函数（）上{
u=$（“#用户名”）.val（）；
p=$（“#密码”）.val（）；
如果（u！=''&&p！=''）{
$.ajax({
url:'http://**.dyndns home.com/health/index.php/health\u login？用户名='+u+'&密码='+p，
数据类型：'json'，
成功：函数（数据、文本状态、jqXHR）
{
$.mobile.changePage（“menu1.html”）；
if（data.status==1）{
setItem（“用户名”，u）；
setItem（“密码”，p）；
$.mobile.changePage（“menu1.html”）；
$（“输入[类型=文本]”）.val（“”）；
}
if（data.status==0）{
警告（“错误的用户名或密码！”）；
$（“输入[类型=文本]”）.val（“”）；
}
},
错误：函数（jqXHR、textStatus、errorshown）{
警报（“AJAX请求失败”）；
}
});
}
否则{
警报（“您必须输入用户名和密码”）；
}
返回false；
});
}
});
登录
用户名：
密码：
谢谢！打开emulator的浏览器并键入Internet地址，以验证emulator是否能够连接到Internet。否则，页面中的JS和CSS将无法加载 如果emulator能够连接到Internet，您可以尝试下面的代码。我已经对您的代码进行了一些改进。例如，jQuery框架在同一页面中加载了多次。下面的代码已经在Android中进行了测试
此外注意，您使用的LoalStar用于保存凭据，存储没有到期日期的数据。您应该考虑使用SeSession存储代替本地存储。SESSION存储为一个会话存储数据。< /P>
<!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>
登录
/**
*清除页面中的所有输入。
*/
函数clearPageInputs（）{
$（“输入[类型=文本]”）.val（“”）；
}
/**
*修剪功能
*/
String.prototype.trim=函数（）{
a=此。替换（/^\s+/，“”）；
返回a.replace（/\s+$/，“”）；
};
/**
*提交登录表单
*/
函数sumbitLoginForm（用户，通过）{
if（user.trim（）=''| | pass.trim（）=''）
{
//用希腊语填写用户名和密码
警报（“\u03a3\u03c5\u03bc\u03c0\u03bb\u03ae\u03c1\u03c9\u03c3\u03b5\u03c4\u03bf用户名\u03ba\u03b1\u03b9\u03c4\u03bf密码！”）；
}
其他的
{
$.ajax({
键入：“post”，
网址：'http://.../.../...',
数据：{用户名：用户，密码：pass}，
数据类型：“json”，
成功：功能（数据）{
if（data&&data.status==1）{
//保存在本地存储中
setItem（“用户名”，用户）；
setItem（“密码”，pass）；
//执行页面转换
$.mobile.changePage（“menu1.html”）；
}
否则{
clearPageInputs（）
//希腊语用户名/密码错误
警报（“\u0388\u03c7\u03b5\u03b9\u03c2\u03ba\u03ac\u03bd\u03b5\u03b9\u03ba\u03ac\u03c0\u03bf\u03b9\u03bf\u03bb\u03ac\u03c2\u03c3\u03c4\u03bf用户名\u03ae/\u03ba\u03b1\u03b9\u03c3\u03c4\u03bf密码”）；
}
},
错误：函数（xhr、ajaxOptions、thrownError）{
警报（“错误：+xhr.status+”\n”+
消息：“+xhr.statusText+”\n+
“响应：”+xhr.responseText+“\n”+thrownError）；
}
});
}
返回false；
}
$（文档）.ready（函数（）{
clearPageInputs（）；
$（“#提交按钮”）。单击（函数（）{
sumbitLoginForm（$（“#用户名”）.val（），$（“#密码”）.val（）；
});
});
登录
用户名