Javascript 使用PHP进行淡出的更好方法

我使用php和javascript创建了一个登录脚本

我想做的是在没有页面刷新的情况下登录用户，到目前为止，我已经存档了页面刷新，在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";
    }



?>

由于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);
                }
            }
        });
    }

---

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);

---

返回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);

---

我首先要说的是，PHP应该使用更新的函数或对象来进行所有数据库查询。此外，您应该使用它来保护您免受SQL注入攻击

另一件需要注意的事情是，在一个不会向浏览器输出任何内容的PHP文件中，或者换句话说，它只会运行一些代码，您不需要结束标记。事实上，你不想要一个结束标记。这是因为结束标记之后的任何内容都将被发送到浏览器，浏览器将包含在AJAX成功函数的响应中。这包括空间和新线之类的东西

现在，转到PHP。您需要输出一些JSON，以便检查AJAX中的成功或失败

PHP

为什么将错误消息放在客户端而不是服务器上？因为它允许您轻松更改错误消息的显示方式，而无需触摸服务器端代码。服务器只输出一个错误代码，客户端决定如何处理该代码

---

Javascript数组，

errorMessages

，定义与数组中的索引相对应的错误消息。索引0处的错误消息将对应于

successCode=0

，依此类推。如果不打算使用顺序成功码，可以使用javascript对象指定与每个错误码对应的键。

我首先要说的是，PHP应该使用更新的函数或对象来进行所有数据库查询。此外，您应该使用它来保护您免受SQL注入攻击

另一件需要注意的事情是，在一个不会向浏览器输出任何内容的PHP文件中，或者换句话说，它只会运行一些代码，您不需要结束标记。事实上，你不想要一个结束标记。这是因为结束标记之后的任何内容都将被发送到浏览器，浏览器将包含在AJAX成功函数的响应中。这包括空间和新线之类的东西

现在，转到PHP。您需要输出一些JSON，以便检查AJAX中的成功或失败

PHP

为什么将错误消息放在客户端而不是服务器上？因为它允许您轻松更改错误消息的显示方式，而无需触摸服务器端代码。服务器只输出一个错误代码，客户端决定如何处理该代码

---

Javascript数组，

errorMessages

，定义与数组中的索引相对应的错误消息。索引0处的错误消息将对应于

successCode=0

，依此类推。如果不打算使用顺序成功码，可以使用javascript对象指定与每个错误码对应的键。

我对“淡出函数”的含义感到困惑。您的意思是，如果登录成功，您想使用jQuery淡出div吗？如果是这样的话，那么您将希望从PHP响应某种类型的成功代码，然后在AJAX

success（）

方法中阅读这些代码，淡出div…您不能直接从PHP代码调用JavaScript-您需要发送一个对JavaScript代码的响应，让JavaScript代码根据响应决定是否淡出

。我建议将JSON发送回jQuery AJAX成功函数，告诉它a）要显示的消息，b）如果我不知道你说的“淡出功能”是什么意思。您的意思是，如果登录成功，您想使用jQuery淡出div吗？如果是这样的话，那么您将希望从PHP响应某种类型的成功代码，然后在AJAX

success（）

方法中阅读这些代码，淡出div…您不能直接从PHP代码调用JavaScript-您需要发送一个对JavaScript代码的响应，让JavaScript代码根据响应决定是否淡出

。我建议将JSON发送回jQuery AJAX成功函数，告诉它a）要显示的消息，b）如果是否应该淡出div。

<?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.

//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.
            }
        }
    });
}