Question

当我尝试将jQuery click动画添加到我的提交按钮时，它会启动动画，然后快速重置，因为表单会提交并刷新页面。如果表单由div包装，则动画可以正常工作，但在动画完成后表单不会提交。如何在动画完成后提交表单，并防止动画在表单提交后重新设置。我是PHP和jQuery的新手，无法弄清楚如何做到这一点。以下是我到目前为止的情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
        body
        {
            background-color: lightgrey;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        .PSolCanvas
        {
            transform: translate(-50%, -40%);
            z-index: 1;
            position: absolute;
            left: 50%;
            top: 88.5%;
            background-color: transparent;
            min-height: 100%;
        }
        .PSol
        {
            width: 120px;
            height: 120px;
            margin: 0 auto;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            font: 15px arial;
            color: black;
            border: 1px solid lightgray;
            background: #20AC20;
        }
    </style>
    <script rel = "javascript" type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type='text/javascript'>
        $(document).ready(function(){
            $(".PSol").click(function() {
                $(".PSolCanvas, .TSolCanvas").animate({top: "50%"});
            });
        });
    </script>
</head>
<body>
<?php
$username = "username";
$password = "password"; 
$host = "host";
$db = $username;

if(isset($_POST['PSol']))
{
    $connection = mysqli_connect($host, $username, $password, $db);
    $sql = "UPDATE table SET column='' WHERE id = 1";
    if (mysqli_query($connection, $sql)) {
        echo "Record successfully changed.";
    }
    else{
        echo "Error: " . $sql . "<br>" . mysqli_error($connection);
    }
    mysqli_close($connection);
    echo "<p>Disconnected from server: ".$host."</p>";
}
?>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "post" class = "PSolCanvas">
        <input type = "submit" name = "PSol" class = "PSol" value = "P"/>
    </form>
</body>
</html>

Answer 1

您将尝试在动画上执行callback，以便在完成后提交。类似的东西：

<script type='text/javascript'>
    $(document).ready(function(){
        $(".PSol").click(function(e) {
            // You will want to prevent the natural submission of the form
            e.preventDefault();
            // Notice the function attached to the `.animate()`. 
            // This will fire after the animation is done.
            $(".PSolCanvas, .TSolCanvas").animate({top: "50%"},function(){
                $('.PSolCanvas').submit();
            });
        });
    });
</script>

编辑：这是一个ajax版本，我让它有点复杂，因为你可能想在你网站的其他地方重用ajax，但你真的只需要{{1部分。脚本的顺序很重要，因为这个特定的例子调用自己（调用ajax的另一个页面会更好）。其他所有（将事物分成他们自己的页面）只是建议：

<强> /config.php

this.ajax

<强> /functions/myfunctions.php

<?php
// Make some defines
define("DB_USERNAME",'username');
define("DB_PASSWORD",'password');
define("DB_HOST",'host');
define("DB_DATABASE",'database');

/index.php（无论此页面是什么）

<?php
// Make some functions to make things cleaner/universal
function connection()
    {
        return mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_DATABASE);
    }
// Make a function that you can reuse
function updateTable($val,$con)
    {
        return (mysqli_query($con, "UPDATE table SET column='' WHERE id = {$val}"));
    }

Answer 2

您想在动画运行后提交表单。要做到这一点，你需要阻止默认的'submit'，然后在jQuery animate调用上使用回调函数添加你自己的。这只会在动画结束后调用.submit（）。类似的东西（请注意我没有机会检查这段代码，但它应该给你一般的想法：

  $(document).ready(function(){
        $(".PSol").click(function(e) {
            e.preventDefault();
            $(".PSolCanvas, .TSolCanvas").animate({top: "50%"},
                function() {
                $("form").submit(); 
                }
             );
        });
    });

jQuery动画BEFORE表单提交不起作用

2 个答案: