Question

我目前在网页更改之间添加动画时遇到了一些麻烦。有人能帮助我吗？

我有以下动画的Javascript（点击登录时，登录表单淡出）：

<?php
session_start(); // Starting Session
$error=''; // Variable To Store Error Message
if(isset($_POST['submit'])) {
if(empty($_POST['username']) || empty($_POST['password'])) {
    $error = "Username or Password is invalid";
}
else {
    // Define $username and $password
    $username=$_POST['username'];
    $password=$_POST['password'];
    // Establishing Connection with Server by passing server_name, user_id and password as a parameter
    $connection = mysql_connect("localhost", "root", "");
    // To protect MySQL injection for Security purpose
    $username = stripslashes($username);
    $password = stripslashes($password);
    $username = mysql_real_escape_string($username);
    $password = mysql_real_escape_string($password);
    // Selecting Database
    $db = mysql_select_db("phplogin", $connection);
    // SQL query to fetch information of registerd users and finds user match.
    $query = mysql_query("select * from users where password='$password' AND username='$username'", $connection);
    $rows = mysql_num_rows($query);
    if($rows == 1) {
        $_SESSION['login_user']=$username; // Initializing Session
        //header("location: home.php"); // Redirecting To Home Page
    } else {
        $error = "Username or Password is invalid";
    }
    mysql_close($connection); // Closing Connection
}

} ？＆GT;

这是带有错误字段的HTML表单：

    <form class="form" action="" method="POST">
            <input id="username" name="username" type="text" placeholder="Username">
            <input id="password" name="password" type="password" placeholder="Password">
            <button name="submit" type="submit" id="login">
                Login
            </button>
            <span><?php echo $error; ?></span>
        </form>

Login.php检查用户数据是否正确/不正确。成功时指向新页面（home.php）：

if($rows == 1) {
        $_SESSION['login_user']=$username; // Initializing Session
        //header("location: home.php"); // Redirecting To Home Page
    } else {
        $error = "Username or Password is invalid";
    }

如何启用点击事件，以便成功时它会指向带淡出动画的新页面？

将.js更改为：

$(document).ready(function() {
$('#loginbutton').click(function() {
    var username=$("#username").val();
    var password=$("#password").val();
    var dataString = 'username=' + username + '&password=' + password;
    if($.trim(username).length > 0 && $.trim(password).length > 0) {
        $.ajax({
            type: "POST",
            url: "login.php",
            data: dataString,
            cache: false,
            success: function(data) {
                if(data) {
                    $('.form').fadeOut(500, function() {
                        window.location.href = 'home.php';
                    });
                }
            }
        });
    } else {
        return false;
    }
});
});

Answer 1

你需要对你的php函数进行ajax调用，返回登录是真还是假，然后动画如果php函数返回true。

$.ajax({
    type: 'POST',
    url: 'Login.php?action=verify_login',
    data: formData,
    success: function(response){
        if(response.success){
            $('.form').fadeOut(1000, function(){
                window.location.href = 'new-url.php';
            });
        }
    }
});

如果你的意思是检查表单是否有效，只要字段中包含文本，然后回发并让服务器决定你要做什么：

    var $form = $('.form');
    var $username = $('#username');
    var $password = $('#password');

    //make this validation as fancy as you want
    if($username.val() !== '' && $password.val() !== ''){
        $form.fadeOut(1000, function(){
            $form.submit();
        });
    }

这会淡化表格，1秒后提交表格

页面更改之间的动画功能

1 个答案: