我知道登录/注册系统要在Phonegap中工作,必须在php中使用aJax。我已经有了一个成功的php登录和注册页面,但我不确定从哪里开始使用jQuery/aJax,也就是我应该把它放在哪里,以及我到底应该放什么。我想知道是否有人知道如何给我指明正确的方向。
jQuery是一个基于Javascript的框架。Javascript是一种客户端(浏览器)语言。它在你的设备上运行,不像PHP在服务器上执行。
您需要使用脚本标记将jQuery包含在登录页面的HTML中:
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
jQuery提供了一种针对文档中任何html元素并对该元素执行某些功能的方法。您可以使用以下语法指定哪个元素:
$(element).doSomething();
您可以选择类别或ID:
<p id="myparagraph">A paragraph of text</p>
<p class="myparagraphclass">A paragraph of text</p>
$('#myparagraph').doSomething();
$('.myparagraphclass').doSomething();
AJAX
AJAX是Javascript引入的一种方法,它允许页面请求另一个url以及该请求的结果。您需要使用AJAX登录Cordova/Phonegap,因为您正在构建的"应用程序"是基于Javascript的。
值得庆幸的是,jQuery提供了一些非常好用的AJAX方法。
把它放在一起
我从前面的一个问题中注意到,您已经创建了一个PHP脚本来检查登录凭据是否正确。警告:mysqli_fetch_array()要求参数1为mysqli_result,在第15行的/public_html/access/login.php中给定null
我对该问题中的代码进行了轻微编辑(/access/login.php):
require_once($_SERVER['DOCUMENT_ROOT'] . "/html5up-aerial/access/functions.php");
$username = trim($_POST['username']);
$password = trim($_POST['password']);
if ($username&&$password) {
session_start();
require_once($_SERVER['DOCUMENT ROOT'] . "db_connect.php");
mysqli_select_db($db_server, $db_database) or
die("Couldn't find db");
$username = clean_string($db_server, $username);
$password = clean_string($db_server, $password);
$query = "SELECT * FROM users WHERE username='$username'";
$result = mysqli_query($db_server, $query);
*if($row = mysqli_fetch_array($result)){*
$db_username = $row['username'];
$db_password = $row['password'];
if($username==$db_username&&salt($password)==$db_password){
$_SESSION['username']=$username;
$_SESSION['logged']="logged";
//header('Location: home.php'); // Have commented this out
$message = "YOU ARE NOW LOGGED IN!"; // <- ADDED THIS
}else{
$message = "<h1>Incorrect password!</h1>";
}
}else{
$message = "<h1>That user does not exist!</h1>" .
"Please <a href='index.php'>try again</a>";
}
mysqli_free_result($result);
require_once("db_close.php");
}else{
$message = "<h1>Please enter a valid username/password</h1>";
}
//header/footer only required if submitting to a seperate page
echo $message; // ADDED THIS
die(); // ADDED THIS
这将是AJAX请求的PHP脚本。
现在,我们使用登录表单创建HTML文档,并包含jQuery,并编写我们的ajax代码:
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<form class="login-form" method="post">
Username: <input name="username" /><br />
Password: <input name="password" type="password" /><br />
<input type="submit" value="Login" />
</form>
<script>
$('.login-form').on('submit', function(e) { // Listen for submit
e.preventDefault(); // Don't actually submit the form
var data = $(this); // Put the form in a variable
$.ajax({
type: "POST",
url: '/access/login.php',
data: $(data).serialize(), // Make form data into correct format
success: function(response) {
alert(response); // Alert with the response from /access/login.php
}
});
});
</script>
要调试此代码,您需要使用Chrome开发工具栏或Firefox Firebug。希望这能有所帮助。