[英]A Better way of doing Fade Out with PHP
我amc用php和javascript创建一个Login脚本。
我要做的是在没有刷新页面的情况下登录用户,到目前为止,我没有归档页面刷新。在Stack Flow用户的帮助下,我对PHP相当满意,但是对Javascript客户端来说却是新手。
无论如何,当用户输入正确的数据并且会话开始时,如何调用淡出功能?
继承人的PHP方面
<?php
require "../core/database.php";
//lets create some veriables to use, This way is shorter
$username = strip_tags(trim($_POST['user_login']));
$password = strip_tags(trim($_POST['pass_login']));
$md5_pass = md5($_POST['pass_login']);
$user_login = mysql_real_escape_string($username);
$pass_login = mysql_real_escape_string($md5_pass);
if (($user_login) && ($password)) {
//Connect to the database to fetch the users username and password
$select_user = mysql_query("SELECT username,password FROM users WHERE username='$user_login' AND password='$pass_login'");
$user_rows = mysql_fetch_array($select_user);
$username_row = $user_rows['username'];
$password_row = $user_rows['password'];
if(($username_row==$user_login) && ($md5_pass==$password_row)) {
//All user information is correct, Now start the session
//I HAVE CALLED IT HERE HOPING THERE,S A BETTER WAY OF DOING THIS. IT WILL CAL
echo "
Yes, Now we can start the session right here, when your ready.
<script>
$('#field').fadeOut();
</script>";
} else {
echo "The username or password you entered is incorrect";
}
} else {
echo "<b>Blank Fields</b> <br>
You must enter A Username/Password Combination";
}
?>
如果您需要它,则有客户端意愿(某些用户对其进行了修改,以使功能更好)
$(document).ready(function() {
// Make a function that returns the data, then call it whenever you
// need the current values
function getData() {
return {
user_login: $('#user_login').val(),
pass_login: $('#pass_login').val()
}
}
function loading(e) {
$('#content').html('Loading Data');
}
function check(e) {
e.preventDefault();
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: getData(), // get current values
success: function (data) {
$('#content').html(data);
}
});
}
// Don't repeat so much; use the same function for both handlers
$('#field').keyup(function(e) {
if (e.keyCode == 13) {
var username = $('#user_login').val();
loading(e);
check(e);
}
});
$('#submit').click(function(e) {
if (e.keyCode != 13) {
loading(e);
check(e);
}
});
});
因为PHP是服务器端,而Java脚本控制着客户端,所以做或调用它的最佳方法可能就是这种方式,但是无论如何它还是值得一问的。
除此之外,一切都进行得很好。
如果您希望可以帮助更改加载/编码/工作数据的方式,但是该功能可以正常运行,因此没有太多需求。
ajax成功方法需要检查服务器的响应,以查看登录是否成功,然后采取适当的措施:
// php
if(($username_row==$user_login) && ($md5_pass==$password_row)) {
//All user information is correct, Now start the session
echo 'correct';
} else {
echo 'The username or password you entered is incorrect';
}
// js
function check(e) {
e.preventDefault();
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: getData(), // get current values
success: function (data) {
if (data === 'correct') {
$('#field').fadeOut();
} else {
$('#content').html(data);
}
}
});
}
返回JSON而不是原始HTML更加灵活。 快速示例:
PHP方面
<?php
require "../core/database.php";
$json = array('success' => false, 'error' => null);
$username = strip_tags(trim($_POST['user_login']));
$password = strip_tags(trim($_POST['pass_login']));
$md5_pass = md5($_POST['pass_login']);
$user_login = mysql_real_escape_string($username);
$pass_login = mysql_real_escape_string($md5_pass);
if (($user_login) && ($password)) {
$select_user = mysql_query("SELECT username,password FROM users WHERE username='$user_login' AND password='$pass_login'");
$user_rows = mysql_fetch_array($select_user);
$username_row = $user_rows['username'];
$password_row = $user_rows['password'];
if(($username_row==$user_login) && ($md5_pass==$password_row)) {
$json['success'] = true;
}
else {
$json['error'] = "The username or password you entered is incorrect";
}
} else {
$json['error'] = "<b>Blank Fields</b> <br>You must enter A Username/Password Combination";
}
echo json_encode($json);
您的AJAX功能:
function check(e) {
e.preventDefault();
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: getData(), // get current values
success: function (data) {
var loginResult = JSON.parse(data);
if(loginResult.success){
//Login successful - fade out whatever form or fields
//that you want to
$('#field').fadeOut();
} else{
//Add error message to an error div or whatever
$('#error').html(loginResult.error);
}
}
});
}
首先,您的PHP应该对所有数据库查询使用较新的mysqli_ *函数或PDO对象。 此外,您应该使用准备好的语句 ,以保护您免受SQL注入攻击。
需要注意的另一件事是,在一个PHP文件中,该文件不会向浏览器输出任何内容,或者换句话说,仅用于运行一些代码,因此不需要结束标记。 实际上,您不需要结束标记。 这是因为在结束标记之后的所有内容都将发送到浏览器,这将包含在AJAX成功函数的响应中。 其中包括空格和换行符。
现在,转到您的PHP。 您将要输出一些JSON,以便可以检查AJAX中的成功或失败。
PHP
<?php
require "../core/database.php";
//lets create some veriables to use, This way is shorter
$username = strip_tags(trim($_POST['user_login']));
$password = strip_tags(trim($_POST['pass_login']));
$md5_pass = md5($_POST['pass_login']);
$user_login = mysql_real_escape_string($username);
$pass_login = mysql_real_escape_string($md5_pass);
//Create an array to represent our JSON data.
$json = array(
"successCode" => 0
);
if (($user_login) && ($password)) {
//Connect to the database to fetch the users username and password
$select_user = mysql_query("SELECT username,password FROM users WHERE username='$user_login' AND password='$pass_login'");
$user_rows = mysql_fetch_array($select_user);
$username_row = $user_rows['username'];
$password_row = $user_rows['password'];
if(($username_row==$user_login) && ($md5_pass==$password_row)) {
//All user information is correct, Now start the session
//echo "Yes, Now we can start the session right here, when your ready."
$json['successCode'] = 0;
} else {
//echo "The username or password you entered is incorrect";
$json['successCode'] = 1;
}
} else {
//echo "<b>Blank Fields</b> <br>
//You must enter A Username/Password Combination";
$json['successCode'] = 2;
}
//Set that our content type is JSON
header("Content-type: application/json");
echo json_encode($json); //Convert the PHP array to JSON and echo it as the response.
在我们的PHP,我们已经创建了一个$json
阵列将故事successCode
,我们将响应客户端。 这将告诉客户端登录是成功还是失败,甚至发生什么类型的失败。 然后由客户端决定如何向用户显示该成功或失败。 这允许多个应用程序使用相同的服务器端源,但是如果需要,则以不同的方式显示错误。
在PHP的末尾,我们设置了标头Content-type
来指定将application/json
发送回客户端。 然后,我们将PHP数组编码为JSON,并将其输出到响应。
jQuery的/ JavaScript的
//Let's define different messages depending on what status code we get on the client.
var errorMessages = [
"Yes, Now we can start the session right here, when your ready.",
"The username or password you entered is incorrect",
"<b>Blank Fields</b><br />You must enter A Username/Password Combination"
];
function check(e) {
e.preventDefault();
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: getData(), // get current values
success: function (data) {
//First, make sure that data and data.successCode are defined.
if (data && data.successCode) {
//Here, you are getting back the JSON data from the login call.
$('#content').html(errorMessages[data.successCode]);
//If the successCode is 0, which means it was successful, then we want to fade out the #field div.
if (data.successCode == 0) {
$('#field').fadeOut();
}
} else {
//There must've been a server error. You'd handle that here.
}
}
});
}
为什么将错误消息放在客户端而不是服务器上? 因为它使您可以轻松更改错误消息的显示方式,而无需触摸服务器端代码。 服务器仅输出错误代码,而客户端则决定如何处理该代码。
Javascript数组errorMessages
定义了与其在数组中的索引相对应的错误消息。 索引0处的错误消息将对应于successCode = 0
,依此类推。 如果您不打算使用顺序成功代码,则可以使用javascript对象来指定与每个错误代码相对应的键。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.