0

我有这个代码。

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <form action = "" method = "POST" id = "form">
        <img src = "circle.gif" id="loading" style="display:none; "/>
        <input type="text" name = "text2">
        <input type="submit" name="submit2" value="Send">
    </form>
<?
if (isset($_POST['submit2'])){
    echo $_POST['text2'];
}
?>
    <script>
        $('#form').submit(function(e) {
            $('#loading').show();
            return false;
        });
    </script>
</body>
</html>

我想将使用 PHP写入文本框中的值存储在我的数据库中，并且在保存它的同时，我想使用 jQuery 显示一个 gif，一旦加载了页面，就应该删除这个 gif。

然后，如果我什么都不评论，提交按钮时会出现 gif 但回显失败。

如果我评论 jQuery 脚本，PHP 会回显所写的值。

如果我评论 PHP 脚本，则会显示 gif，但当然没有回显...

我怎么能按我的要求做。我知道我的完整脚本直到只显示 gif，但没有这个我无法继续。

4

1 回答 1

1

您可以实现您想要的行为，但您需要通过向服务器提交 AJAX 请求然后处理返回值来实现。所以基本上你会将此ajax请求添加到表单的单击或提交事件中，并通过javascript处理行为和请求。

也许是这样的：

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <form action = "formSubmitHandler.php" method = "POST" id = "form">
        <img src = "circle.gif" id="loading" style="display:none; "/>
        <input type="text" name = "text2">
        <input type="submit" name="submit2" value="Send">
    </form>
    <script>
        $(document).ready(function(){
            $('#form').submit(function(){
                // Show the loading icon before the processing begins
                $('#loading').show();

                // Send the query/form details to the server
                jQuery.ajax({
                    data: $(this).serialize(),
                    url: this.action,
                    type: this.method,
                    success: function(results) {
                        // Now that the processing has finished, you 
                        // can hide the loading icon
                        $('#loading').hide();
                        // perhaps display some other message etc
                    }
                })
                return false;
            });
        });
    </script>
</body>
</html>
于 2013-02-14T22:24:03.393 回答