我在这里尝试做的是使用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="[email protected]"/>
<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/
你可以建立它。如果它是您正在寻找的，也不要忘记接受答案。
index.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>
auth.php
<?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));
?>
index.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'});
}
}
}
});