2

以前に同じコードを使用したことがあり、確認して確認しましたが、エラーはありません。どういうわけか、このコードは本来の動作をしていないようです。理由はわかりません。助けてください。

ajax コードは ajax リクエストを実行しないようですが、HTML でフォームが設​​定されている内容に応じて、通常の HTTP get/post リクエストを送信します。これは、ページが更新され続けることを意味します。成功関数も呼び出されないようです。$.ajax({の行まで、残りのコードが機能していることを確認しました。ここで、ページが更新されます。フォームを設定する方法でしょうか?送信ボタンがないことに注意してください。フォームは、押されたボタンに応じて異なるアクションをサーバーに送信します。

HTMLコードは次のとおりです。

<form id="frmVerify" name="frmVerify" method="post">
<p>Your account has not been verified. You must verify your email to continue logging into your account.</p>
<p>A verification token was sent to your email address, <strong id="username" name="username"><?php echo $_SESSION['username']; ?></strong>. Note that this token expires after 24 hours of issue.</p>
<p>Please check your email to retrieve this token:</p>

  <p>
  <input type="text" name="token" id="token" />
  <button name="action" id="verify" value="<?php echo ACT_VERIFY; ?>">Verify</button>
  </p>
  <p>You can also: </p>
<p>
  <button name="action" id="send" value="<?php echo ACT_SEND_TOKEN; ?>">Send another token</button><br />

  <button name="action" id="change" value="<?php echo ACT_CHANGE_EMAIL; ?>">Change Email</button><br />

  <button name="action" id="delete" value="<?php echo ACT_DELETE_ACCOUNT; ?>">Delete Account</button>
</p>
<p>
  <input type="hidden" name="requester" id="requester" value="Verification" />
</p>
<p><a href="logout.php">Log out</a></p>
</form>

JQUERYコードは次のとおりです。

function submitForm(action){
    var username = $("#username").html();
    var token = $("#token").val();
    var requester = $("#requester").val();
    if(validateLogin()){
        $.ajax({
            type: "post",
            url: "verification.php",
            data: "username="+username+"&token="+token+"&action="+action+"&requester="+requester,
            success: function(data) {
                try{
                    var jsonObj = $.parseJSON(data);
                    processOutput(action, jsonObj);
                }catch(e){
                    $("#output").html("PHP module returned non JSON object: <p>"+data+"</p>");
                }//try
            }//success function
        });//ajax
    }else{
        alert("Please fill UserName & Password!");
        return false;
    }//if validate
}

$(document).ready(function(){

$("#verify").click(function(){
    var action = $(this).val();
    submitForm(action);
});

$("#send").click(function(){
    var action = $(this).value();
    submitForm(action);
});

$("#change").click(function(){
    var action = $(this).value();
    submitForm(action);
});

$("#delete").click(function(){
    var action = $(this).value();
    submitForm(action);
});
});
4

3 に答える 3

2

<button>要素はデフォルトで送信ボタンであると信じているため、ボタンが押されるとクリックハンドラーがsubmitForm()関数を呼び出しますが、デフォルトの動作が発生し、フォームが送信されます。ボタンを次のように指定してみてください。

<button type="button" ...

または、クリック ハンドラーから戻りfalseます (JS が無効になっているブラウザーで従来の送信を行うためのボタンが必要な場合)。

.click()すべてのハンドラーが同じことを行うため、コードを大幅に簡素化できることに注意してください。

$(document).ready(function(){
    $("#frmVerify button").click(function(){
        submitForm($(this).val());
        return false;
    });
});

つまり、フォームのあるボタンがクリックされると、その値がsubmitForm()関数に渡されます。

于 2012-08-03T04:35:45.583 に答える
2

通常の投稿のように動作する理由は、button要素がデフォルトで送信タイプであるため、JavaScript の実行が完了する前に投稿されるためです。HTML ボタンを次のように変更します。

<button type="button" name="action" id="verify" value="<?php echo ACT_VERIFY; ?>">Verify</button>

あなたのコードで修正すべきことは他にもたくさんあるかもしれませんが、質問はなぜ ajax 投稿ではなく投稿を実行しているのかに焦点を当てていました。

これは、変更を示す jsfiddle です。-- http://jsfiddle.net/GSVdQ/1/

于 2012-08-03T04:36:50.737 に答える
0

$(this).value()正しく聞こえません...

于 2012-08-03T04:42:46.710 に答える