0

実際にページをリロードすることなく、ajax を使用して送信したい基本的なフォームがあります。コードの要点は次のとおりです。

<cfif cgi.request_method EQ "post">
    <cfdump var="#form#" />
    <cfabort />
</cfif>

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

        <script type="text/javascript">
            $(function(){
                $('#qsSearch').click(function(){
                    $.post(
                        '<cfoutput>#cgi.script_name#</cfoutput>',
                        $('#qsUserForm').serialize(),
                        function(data){
                            $('#results').html(data);
                        }
                    );
                });
            });
        </script>
    </head>
    <body>
        <form id="qsUserForm">
            <table>
                <tr>
                    <th>First Name:</th><td><input id="qsFirstName" name="qsFirstName" type="text" /></td>
                    <th>Last Name:</th><td><input id="qsLastName" name="qsLastName" type="text" /></td>
                    <th>Username:</th><td><input id="qsUserName" name="qsUserName" type="text" /></td>
                    <th>Email:</th><td><input id="qsEmail" name="qsEmail" type="text" /></td>
                    <th>User ID:</th><td><input id="qsUserID" name="qsUserID" type="text" /></td>
                    <td><input id="qsSearch" name="qsSearch" type="submit" value="Search" /></td>
                </tr>
            </table>
        </form>
        <div id="results"></div>
    </body>
</html>

フォーム ダンプは「results」div に表示されるはずです。しかし、そうではありません。

Firebug でデバッグすると、コードが実際に正しく実行され、結果が結果 div に挿入されることに気付きましたが、ポスト コードが終了するとすぐに消えます。post 呼び出しの閉じ括弧にブレークポイントを配置すると、結果 div に正しい結果が表示されます。コードが続行するとすぐに、コードは消えます。

私はこれまでこのようなコードを十分に頻繁に使用してきました - この単純な ajax 投稿の何が問題なのですか?

(検索ボタンのクリック ハンドラーをフォーム送信ハンドラーに置き換えてみましたが、何も変わりませんでした。)

4

2 に答える 2

2

どうやら、あなたのフォームはリロードされています

次を使用してフォームの送信を停止する必要があります。

   $('#qsSearch').click(function(event) {
    event.preventDefault();
    $.post('<cfoutput>#cgi.script_name#</cfoutput>', $('#qsUserForm').serialize(), function(data) {
        $('#results').html(data);
    });
});​
于 2012-06-28T09:30:35.547 に答える