为什么提交按钮不能同时发送到PHP和jQuery?

时间:2013-02-14 21:56:13

标签: php jquery

我有这段代码。

<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,但如果没有这个,我就无法继续。

1 个答案:

答案 0 :(得分:1)

您可以实现所需的行为,但您需要通过向服务器提交AJAX请求然后处理返回值来实现。所以基本上你将这个ajax请求添加到表单的click或submit事件中,并通过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>