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が表示されますが、echoは失敗します。

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 に答える