5

ajax投稿後のページの更新に問題があります。6つの異なるバリエーションを試しましたが、ある時点で適切な結果が得られましたが、ページの更新を停止できず、このサイトでネットを検索した後、どれも機能しておらず、まださわやかです...

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

$('#submit_btn').click(function() {
/*event.preventDefault();*/
var curPassword = $("input#curPassword").val();
var newPassword = $("input#newPassword").val();
var new2Password = $("input#new2Password").val();
/*var params = 'curPassword='+ curPassword + '&newPassword=' + newPassword + '&new2Password=' + new2Password; */
var params = {
    curPassword: curPassword,
    newPassword: newPassword,
    new2Password:new2Password
};
$.ajax({
        type: "POST",
        url: "testAjax.php",
        data: params,
        success: function(msg){
            alert(msg);
        }
    });
    return false;
});

フォームは次のとおりです。

<form method="post" action="" name="confirmChange" class="confirmChange">
<label for="curPassword">Current Password:</label>
<input type="password" name="curPassword" id="curPassword" value="" />
<label for="newPassword">New Password:</label>
<input type="password" name="newPassword" id="newPassword" value="" />
<label for="new2Password">Confirm New Password:</label>
<input type="password" name="new2Password" id="new2Password" value="" />
<br />
<input type="button" name="confirmChange" class="confirmChange" id="submit_btn" value="Change" />

これを機能させるための助けに感謝します=/

更新： 質問がちょっと雑然としていたので、直接関係のない他のコードを削除しました。また、最新のリビジョンを反映するようにコードを更新しました。ajaxのURLを単純なtextAjax.phpに変更しました。単純なechohelloworldは他に何もありませんが、まだ何も得られていません。

アップデート 2javascriptコードを次のように変更しようとしました：

$('#submit_btn').click(function() {
        alert('Button Clicked');
});

そして、何も得られません...それが以下のフォームである場合、クリック機能がまったく機能していない可能性はありますか？

4

6 に答える 6

2

入力にtype="submit"を使用する必要はありません。type = "button"を使用して、ボタンのクリックイベントでajax関数を呼び出すだけです。

<input type="button" name="confirmChange" class="confirmChange" id="submit_btn" value="Change">

$('#submit_btn').click(function() {
  (ajax code here)
});

PreventDefault（）も機能しますが、私の意見では、送信ボタンの使用を完全に回避できるのに、なぜイベントが自然に発生しないようにするのでしょうか。

更新： 送信を使用すると、ユーザーがEnterキーを押してアクションをトリガーできることに気付いたので、おそらくそれにはいくつかのメリットもあります。いずれにせよ、preventDefault（）への詳細を含む同様の質問があります。

更新2： ajax関数でパラメーターを修正する必要があります。クエリ文字列を作成する代わりに、配列を使用します。

var params = {
curPassword: curPassword,
newPassword: newPassword,
new2Password:new2Password
};
于 2012-06-08T04:53:10.760 に答える
1

次のコードブロック内にAJAX呼び出しをカプセル化します

$（'form.confirmChange'）。submit（function（event）{
      event.preventDefault（）;
      ＃コードの残りはここに入ります
}）;

PreventDefault（）は、イベントのデフォルトアクションがトリガーされないようにします。

于 2012-06-08T04:53:25.137 に答える
1

これを試して

<script>
function refreshpage(){
 (ajax code here)
  return false;
}
</script>

<form onsubmit="return refreshpage();">
<input type = "submit" value="submit_btn">
</form>
于 2012-06-08T05:10:05.340 に答える
0

私はそれを使用して修正したと思います：

$('#submit_btn').live('click', (function() {

少なくともクリックすると応答が返ってきましたが、更新したり、phpファイルからエコーが戻ったりすることはありませんが、デバッグが簡単になることを願っています。:)

于 2012-06-10T03:36:00.173 に答える
0

私も同じ問題を抱えていました。あなたと同じように、私は自分の<input>タグをタグペアの中に<form>包みました。がなかったとしても<submit>、ボタンをクリックしてAjax呼び出しをトリガーすると、ページが更新され、実際にフォームがページに送信されていることがわかりました。

タグを削除することに<form>なり、この動作は停止しましたが、Ajaxは引き続き期待どおりに機能します。これがこれを経験している他の人に役立つことを願っています。

于 2015-04-12T03:34:58.133 に答える
0

ループを使用して、ajax呼び出しを1回だけ実行します。

var i;
for(i=0;i<1;i++){
//ajax code here
}

だから、それは何度も何度も呼び出すことはありません。

于 2015-04-26T14:10:33.793 に答える