2

これは私のフォームです：

<form id="login_form">
    <table border="0">
        <tr>
            <td>username: </td>
            <td colspan="10">
                <input id="username" name="username" type="text" />
            </td>
        </tr>
        <tr>
            <td>password: </td>
            <td>
                <input id="passwd" name="passwd" type="password" />
            </td>
        </tr>
        <tr style="text-align:center">
            <td>
                <input id="login_submit" type="submit" title="submit" />
            </td>
            <td>
                <input type="reset" title="reset" />
            </td>
        </tr>
    </table>
</form>

私のjqueryコード：

$(function(){
    jQuery("#login_submit").click(function() {
        jQuery.ajax({
            url:'./login/',
            type:'post',
            data:$("#login_form").serialize(),
            dataType:'html',
            async: false,
            success:function(backData)    {
                alert(data);
            },
            error:function(err){
                alert('error = ' + err);
            }
        });
    });
});

私が混乱しているのは、 url: にアクセスしたときにhttp://192.168.0.3/CarKeeperServer/user/login.jsp送信ボタンをクリックすると (jquery コード スニペットにリダイレクト コードがないため、ページは新しいページに移動しません)、URL が に変更されhttp://192.168.0.3/CarKeeperServer/user/login.jsp?username=df&passwd=sd、exposesユーザー名とメソッドと同じようにパスワードGET。なぜこれが起こるのか、そして解決策は何かを誰か説明できますか? どうもありがとう！

4

1 に答える 1

5

preventDefault を呼び出して、フォームが送信されないようにする必要があります。get リクエストが発生したのは、フォームの送信を妨げていないためです。フォームは、現在表示しているページに送信されます。

デフォルトでは、フォームはgetメソッドを使用して情報をサーバーに送信します。参照: http://www.w3.org/TR/html401/interact/forms.html#adef-action

フォームはデフォルトのアクションを指定していないため、現在のページをアクションとして使用します。これは HTML 仕様には組み込まれていませんが、レガシー アプリケーションを維持するために多くのブラウザで実装されています。参照: HTML フォームの action 属性に空の URL を使用することは良い方法ですか? (アクション="")

$(function(){
    jQuery("#login_submit").click(function(e) {
        jQuery.ajax({
            url:'./login/',
            type:'post',
            data:$("#login_form").serialize(),
            dataType:'html',
            async: false,
            success:function(backData)    {
                alert(data);
            },
            error:function(err){
                alert('error = ' + err);
            }
        });
        e.preventDefault();
    });
});
于 2013-04-19T08:03:58.207 に答える