0

私はこれで頭から髪を引き抜こうとしています。

問題は単純だと確信しています。Jquery を使用した Ajax は初めてで、何かを見落としているだけです。しかし、これは迷惑です。フォームが送信されるたびに、ページが更新されて.ajaxスローされerror:ます。何が原因でしょうか? 確かに、フォームの値を Jquery に取得していることはわかっています。そしてnewcomment.php働いています。通常のフォームを投稿できますが、jquery では投稿できません。

function postPhotoComment() {

    var comment = $("#comment").val();
    var album = $("#album").val();
    var photo = $("#photo").val();
    var dataString = "comment="+comment+"&album="+album+"&photo="+photo;

    $.ajax({
        type: "POST",
        url: "/includes/actions/photo-gallery/newcomment.php",
        data: dataString,
        success: function(res) {
            alert("Posted!");
        }
            error: function(res) {
            alert("Error!");
        }
    })  
}

編集:これが私のhtmlフォームです:

<form>
    <textarea id="comment" placeholder="Post Comment..."></textarea>
    <input id="album" type="hidden" value="<?php echo "$a"?>"/>
    <input id="photo" type="hidden" value="<?php echo "$p.$ext"?>"/><br/>
    <button id="photo-comment-submit" onclick="postPhotoComment()">Post</button>
</form>

nameまた、入力に s を指定すると、Chrome はそれらをGET変数のように URL バーに配置することにも気付きました。また、ページを更新するたび?に、URL の末尾に が追加されます。そのため、定期的にフォームを送信しようとしているようです。

4

5 に答える 5

1

AJAXフォーム送信コードを呼び出している関数がフォームのonSubmitメソッドである場合、デフォルトのアクションが発生しないようにする必要があります。つまり、通常の送信を停止する必要があります。

これを実現するには、オブジェクトのpreventDefaultメソッドを使用します。event

function postPhotoComment(evnt) {
    evnt.preventDefault();

    // existing code continues...

}

イベントから戻ることもできfalseますが、そうすることでブラウザごとに異なる効果があり、呼び出しpreventDefaultやstopPropagation直接のように明示的または信頼性が高くないことに注意してください。

編集 また、コードがXHRリクエストを開始したためにエラーハンドラーが呼び出されている可能性がありますが、ブラウザーがデフォルトのアクション（フォームの送信）を開始すると、保留中のXHRリクエストはキャンセルされます。これにより、エラーハンドラがトリガーされます。

編集2私は動作するデモンストレーションでjsFiddleを作成しました：http：//jsfiddle.net/wXrAU/

ドキュメンテーション

于 2012-07-19T22:08:47.763 に答える
1

ブラウザのデフォルトのアクションを停止するためにfalseを返していますか？

$('form').submit(function(){
    var dataString = $(this).serialize(); // shortcut

    $.ajax({
        type: "POST",
        url: "/includes/actions/photo-gallery/newcomment.php",
        data: dataString,
        success: function(res) {
            alert("Posted!");
        }
        error: function(res) {
             alert("Error!");
        }
    });

  return false;// cancels the default action
});
于 2012-07-19T22:09:49.367 に答える
0

そうしないと、 Ajaxreturn false;を使用せずに「通常の」フォームとして送信され、ページがリロードされます。

編集：コメントを読んだ後、これがあなたに最も適していると思います： <form action="url.php" onsubmit="return false;"></form>

jsFiddle と適切なコード: http://jsfiddle.net/SO_AMK/ZVgNv/

PHP は少し混乱しますが、動作します。

于 2012-07-19T22:05:23.753 に答える
0

<form>タグを削除するだけで、実際にこれを修正しました。とにかく私はそれらを必要としませんでした。しかし、今ではすべてが機能しているようです。

于 2012-07-19T23:10:33.613 に答える
-4

スクリプトへの単なるパスではなく、HTTP でアクセス可能な有効な URL を必ず記述してください。

function postPhotoComment() {

    var comment = $("#comment").val();
    var album = $("#album").val();
    var photo = $("#photo").val();
    var dataString = "comment="+comment+"&album="+album+"&photo="+photo;

    $.ajax({
        type: "POST",
        url: "http://yoursite.com/whatever/newcomment.php", // here
        data: dataString,
        success: function(res) {
            alert("Posted!");
        }
            error: function(res) {
            alert("Error!");
        }
    })  
}

JavaScript はクライアント側の言語だからです。ファイルシステムの構造などについては何も知りません。また、AJAX リクエストは HTTP プロトコルに基づいています。

于 2012-07-19T22:03:29.450 に答える