2

変更後も同じ ui.tab ページを維持し、視覚的なフィードバックを提供できるようにするために、ajax を使用してパスワードの変更を送信しようとしています。フォームに action="change_password_do.php" を残せばパスワードを変更できるので、php ファイルは機能します。action="" をフォームに入れると、何も得られません。明らかに、私の ajax には基本的なエラーがありますが、それを見つけることができません。誰かが私を正しい方向に向けることができますか？

<script type="text/javascript">
$(document).ready(function() {
    $('#new_password_submit').click(function() {
        $.ajax({
            type: "POST",
            url: "change_password_do.php",
            data: $("form.pw_todo").serialize()
        });
    });
});
</script>                       

<div id="tabs_6" class="tabs">
       <h2 class="tablecaption">Change your password</h2>

       <form id="change_pass" class="pw_todo" method="post" action="">

            <input class="formlogin" type="password" name="password1" placeholder="New Password" title="Type in your New Password"/><br />
            <input class="formlogin" type="password" name="password2" placeholder="Re-enter New Password" title="Re-type your New Password"/><br />
            <input type="submit" id="new_password_submit" value="Submit" class="button"/>

       </form>  
</div>
4

4 に答える 4

4

クリックハンドラからfalseを返すことにより、ボタンのデフォルトのアクションをキャンセルする必要があります。

$('#new_password_submit').click(function() {
    $.ajax({
        type: "POST",
        url: "change_password_do.php",
        data: $("form.pw_todo").serialize()
    });
    return false; // <-- That's very important
});

別の方法として、次のようなデフォルトのアクションをキャンセルできます。

<script type="text/javascript">
$(document).ready(function(evt) {
    $('#new_password_submit').click(function() {
        evt.preventDefault(); // <-- That's very important

        $.ajax({
            type: "POST",
            url: "change_password_do.php",
            data: $("form.pw_todo").serialize()
        });
    });
});
</script>

ボタンがクリックされたときにクリックハンドラー内のデフォルトのアクションをキャンセルしない場合、は送信ボタンであるためnew_password_submit、フォームが送信され、ブラウザーはページからリダイレクトされ、AJAXリクエストを実行する時間がなくなります。

そうは言っても、送信ボタンの.clickイベントではなく、フォームの.submitイベントにサブスクライブすることをお勧めします。このようにして、AJAXリクエストが常に実行されることが保証されます。送信ボタンをクリックする以外の方法でフォームを送信できることを忘れないでください。たとえば、ユーザーがEnter入力フィールド内でキーを押すと、フォームを送信できます。彼がこの方法でフォームを送信した場合、AJAXリクエストは実行されません。

だから、これが私の推奨される解決策です：

$('#change_pass').submit(function(evt) {
    evt.preventDefault(); // <-- That's very important

    $.ajax({
        type: this.method,
        url: this.action,
        data: $(this).serialize()
    });
});

次に、フォームにアクション属性が設定されていることを確認します。

<form id="change_pass" class="pw_todo" method="post" action="change_password_do.php">

これで、javascriptが実行しているのは、フォームの送信を目立たないようにAJAX化することだけです。ユーザーがJavaScriptを無効にしている場合でも、コードは機能します。

于 2012-12-29T17:33:17.083 に答える
0

すでにAJAXを介して値を渡し、のデータプロパティに直接値を渡して、AJAXアプローチを続行するため、フォームや送信ボタンを使用する必要はないと思います。$.ajax();

<script type="text/javascript">
$(document).ready(function() {       
    $('#new_password_submit').click(function(){ 
        $.ajax({
        type: "POST",
        url: "change_password_do.php",
        data: {'password1': $('#password1').val(),
               'password2': $('#password2').val()}
        });
    });
}); 
</script>                       

<div id="tabs_6" class="tabs">
       <h2 class="tablecaption">Change your password</h2>

            <input class="formlogin" type="password" name="password1" placeholder="New Password" title="Type in your New Password" id="password1"/><br />
            <input class="formlogin" type="password" name="password2" placeholder="Re-enter New Password" title="Re-type your New Password" id="password2"/><br />
            <input type="button" id="new_password_submit" value="Submit" class="button"/>

</div>

注：IDを追加password1しましpassword2た。

于 2012-12-29T17:33:40.453 に答える
0

ボタンのクリック イベントをバインドしないでください。フォームの送信イベントをより適切にバインドします。

<script type="text/javascript">

$(function() {
    $('#change_pass').submit(function(e) {

        // this will prevent default form behaviour
        e.preventDefault()

        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data){

                // consider displaying some message on success

            }
        });
    });
});

</script>

<form id="change_pass" class="pw_todo" method="post" action="change_password_do.php">

...

</form>
于 2012-12-29T17:38:40.370 に答える
0

送信イベントをキャンセルする必要があります。そうしないと、ajax 呼び出しの前にフォームが正常に送信されます。

$('#new_password_submit').click(function(e){
        e.preventDefault();
        $.ajax({
            ....

次に、ajax 呼び出しからの成功関数が欠落しているため、イベントが機能しても、少なくとも視覚的には気付かないでしょう。

そして最後に、 jQuery フォーム プラグインをチェックしてください。まさにあなたが探しているものを実行します。派手なことはありませんが、たくさん必要な場合に便利です

于 2012-12-29T17:34:24.097 に答える