[英]Phonegap App using Jquery mobile - Login and profile page. Im in need of someone who knows phonegap
我在這里嘗試做的是使用 jquery mobile 創建一個登錄系統,然后在成功登錄后我想在個人資料頁面上顯示用戶信息。 我知道我需要為此使用的一些功能,盡管我使用 phonegap 我需要使用 AJAX 來傳遞 thr 數據,這是真正讓我感到困惑的部分。 如果有人能幫我解決這個問題,那就太好了,我已經為此苦苦掙扎了幾個星期。
下面是我的 HTML 代碼。 我想在用戶登錄成功后將他們的個人資料信息傳遞到第 2 頁。
<!-------------- First page for form ----------->
<div data-role="page" id="home">
<!-------------- First page header ----------->
<div data-role="header">
<h1>Login in</h1>
</div>
<!-------------- First page main content ----------->
<div data-role="main" class="ui-content" id="login"/>
<form method="post" action="#profile" data-ajax="false"/>
<label for="email">Email: <span>*</span></label>
<input type="email" id="email" name="email" placeholder="example@domain.com"/>
<label for="password">Password : <span>*</span></label>
<input type="password" name="password" id="password" placeholder="********"/>
<input type="submit" data-inline="true" id="login" value="Submit" data-theme="b"/>
</form>
</div>
<!-------------- First page footer ----------->
<div data-role="footer" id="footer">
<h1>...</h1>
</div>
<!-------------------------------------------------------------
End of First page
-------------------------------------------------------------->
<!-------------- Second page ----------->
<div data-role="page" id="profile">
<!-------------- Second page header ----------->
<div data-role="header">
<h1>Profile</h1>
</div>
<!-------------- Second page main content ----------->
<!-------------- Second page footer ----------->
<div data-role="footer">
<h1>...</h1>
</div>
</div>
<!-------------------------------------------------------------
End of Second page
-------------------------------------------------------------->
下面是我的js文件。 請不要這不是為 jquery mobile 設置的。 我一直在改變我對這個任務的方法,所以我可以使用一些幫助來解決這個問題以與 JQM 一起工作。
mysubmit=function(){
$("#submit").click(function(e){
e.preventDefault();
console.log('clicked');
var email= $.trim($("#email").val());
var password= $.trim($("#password").val());
$("#status").text("Logging you in...");
var loginString ="email="+email+"&password ="+password;
$.ajax({
type: "GET",crossDomain: true, cache: false,
url:"http://localhost/form/www/auth.php",
success: function(data){
console.log(data);
//get HTML
tml
var myarray = JSON.parse(data);
console.log(myarray);
if(data == "success") {
$("#status").text("You're logged in!");
localStorage.loginstatus = "true";
window.location.href = "welcome.html";
}
else if(data == "error")
{
$("#status").text("Ops, your login has failed");
}
}
});
});
下面是我的php代碼。 這還遠未完成,雖然我用它撞到了一堵磚牆,似乎無法找到一種方法來讓它工作。
<?php
$host = "localhost";
$dbusername = "root";
$dbpassword = "";
$dbname = "registration";
$conn = new mysqli ($dbhost, $dbuser, $dbpass, $db);
if($conn->connect_error){
echo "Connection has failed";
}
else{
echo "Connect was successful";
}
if(isset($_POST["submit"]))
{
$username=$_POST["username"];
$password=$_POST["password"];
$query = "SELECT * FROM `users` WHERE `password` = '$password' and email='$email'";
$result = mysql_query(query);
$numRows = mysql_num_rows($result);
if($numRows==1){
session_start();
$_SESSION["username"] = $username;
header("Location: ./index.html");
else{
echo "Invalid Login Information";
}
}
}
真的很感激人們能在這方面給我的任何幫助。
先感謝您。
那么你很幸運,我仍然保留着我的 jQuery Mobile 博客來維持生命。
這是一個工作示例: https : //www.gajotres.net/complex-jquery-mobile-authorization-example/
你可以以此為基礎。 如果您正在尋找答案,也不要忘記接受答案。
索引.php:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div data-role="page" id="login" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Login Page</h3>
</div>
<div data-role="content">
<form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<div data-role="fieldcontain">
<label for="password">Enter your password:</label>
<input type="password" value="" name="password" id="password"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit">
</fieldset>
</form>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<a href="#login" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete" id="back-btn">Back</a>
<h3>Welcome Page</h3>
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>Page footer</h3>
</div>
</div>
</body>
</html>
身份驗證文件
<?php
function authorize()
{
//normally this info would be pulled from a database.
//build JSON array
$status = array("status" => "success");
return $status;
}
$possible_params = array("authorization", "test");
$value = "An error has occurred";
if (isset($_POST["action"]) && in_array($_POST["action"], $possible_params))
{
switch ($_POST["action"])
{
case "authorization":
$value = authorize();
break;
}
}
//return JSON array
exit(json_encode($value));
?>
索引.js
var userHandler = {
username : '',
status : ''
}
$(document).on('pagecontainershow', function (e, ui) {
var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
if(activePage.attr('id') === 'login') {
$(document).on('click', '#submit', function() { // catch the form's submit event
if($('#username').val().length > 0 && $('#password').val().length > 0){
userHandler.username = $('#username').val();
// Send data to server through the Ajax call
// action is functionality we want to call and outputJSON is our data
$.ajax({url: 'auth.php',
data: {action : 'authorization', formData : $('#check-user').serialize()},
type: 'post',
async: 'true',
dataType: 'json',
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.loading('show'); // This will show Ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.loading('hide'); // This will hide Ajax spinner
},
success: function (result) {
// Check if authorization process was successful
if(result.status == 'success') {
userHandler.status = result.status;
$.mobile.changePage("#second");
} else {
alert('Logon unsuccessful!');
}
},
error: function (request,error) {
// This callback function will trigger on unsuccessful action
alert('Network error has occurred please try again!');
}
});
} else {
alert('Please fill all necessary fields');
}
return false; // cancel original event to prevent form submitting
});
} else if(activePage.attr('id') === 'second') {
activePage.find('.ui-content').text('Wellcome ' + userHandler.username);
}
});
$(document).on('pagecontainerbeforechange', function (e, ui) {
var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
if(activePage.attr('id') === 'second') {
var to = ui.toPage;
if (typeof to === 'string') {
var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname.substring(1);
if (to === '#login' && userHandler.status === 'success') {
alert('You cant open a login page while youre still logged on!');
e.preventDefault();
e.stopPropagation();
// remove active status on a button if a transition was triggered with a button
$('#back-btn').removeClass('ui-btn-active ui-shadow').css({'box-shadow':'0 0 0 #3388CC'});
}
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.