3

これは本当にイライラします。これについて何か助けていただければ幸いです。コメントと呼ばれる div と、その div 内にフォームがあります。私がやりたいことは、フォームを現在のページに投稿し、全体をリロードせずに div 内にロードすることです。これが私の現在のコードです：

<div id="comments">
<form action="#" method="post" onsubmit="return false;" >
<input type="hidden" name="txtname" value="test">
<textarea id="wysiwyg" name="wysiwyg" rows="5" cols="50"></textarea>
<input type="submit" name="post" id="post" value="Submit">
</form>
<script type="text/javascript">
EDIT: Read edit below for current code
</script>        
</div>

送信すると、アラートが発生しますが、ページが読み込まれません。次のようにイベントを作成すると、正常に動作します。

$("#comments").load("comments.asp");

データの投稿が好きではありません。以前に .load を使用したことがありますが、データを投稿することはありませんでした。これらのまったく同じフォーラムから上記のコードを取得しました。

正直なところ、'name' と 'tel' の目的がよくわかりません。コードを処理するときに、これらの変数またはフォーム変数名を参照する必要がありますか? これは ASP クラシックにあります。

上記のコードの何が問題なのですか? POST 経由でフォーラムからデータを送信するにはどうすればよいですか? ありがとう！

編集:私は今、次のコードを使用しています:

$("#post").submit(function(event){
    var $form = $(this),
        $inputs = $form.find("input, select, button, textarea"),
        serializedData = $form.serialize();
    $inputs.attr("disabled", "disabled");

    $.ajax({
        url: "/comments.asp",
        type: "post",
        data: serializedData,
        success: function(response, textStatus, jqXHR){
            console.log("comment posted");
        },
        error: function(jqXHR, textStatus, errorThrown){
            console.log(

                textStatus, errorThrown
            );
        },
        complete: function(){
            // enable the inputs
            $inputs.removeAttr("disabled");
        }
    });

    event.preventDefault();
});

そして今、それはフォームを処理するために適切に使用しています...しかし、それはcomments.aspに行きます. 特定の div (コメント div?) ですべてのアクションを実行するにはどうすればよいですか?

4

3 に答える 3

4

完全に一貫性がない方法で、さまざまな手法をブレンドしているように思えます。

$.post は $.ajax の短縮バージョンです (こちらを参照)。

$.load は URL を受け取り、それを<div>または他の DOM 要素に貼り付けます (こちらを参照)。

私がそれを正しく理解していれば (そうではないかもしれません!)、あなたは本当にフォームをロードしたいわけではなく、フォーム フィールドに値を入力したいと考えています。$.load はこれを行う奇妙な方法です。（うまくいくかもしれませんが、私は別の方法でやっています。）

$(#...).submit を使用している場合は、フォーム内のすべてのものを除外することもできます。以下はうまくいくはずです。

<form id="form_id">
...
<input type="submit" value="Submit">
</form>

私の方法は次のとおりです。(1) ハードコーディングされた HTML フォームを用意する (または AJAX でビルドする)、(2) $.post (または $.ajax) を使用して DB (またはどこからでも) から値を取得する、(3) 値を貼り付ける.val() (または同等のもの - 入力タイプに適したもの) とその入力の DOM ID を使用してフォームに変換し、(4) .submit を使用します (あなたと同様の方法で)。他の人が示唆しているように、 preventDefault を追加する必要があります。

また、#post を DOM ID として使用して水を濁らせています。本当にフォーム自体に ID を与えてから、$(#form_id).submit(... を使用したいのですが、今はテストできませんがsubmit、入力フィールドに があると、問題が発生する可能性があります。公式の例では、フォーム ID に送信します。

<div>また、 with id 'comments' が実際に多くのことを行うかどうかもわかりません。あなたの「コメント」のようなコンテナー ID がありますが、それは AJAX でフォームを作成し、それらをコンテナーに貼り付けているためです。それを行う必要がない場合、id 'comments' は手順全体に不要です。

于 2012-04-15T03:29:18.313 に答える
1

テキストボックス要素には、値を持つIDがありませんtxtname。ただし、スクリプトでは#、（idコンテキストを使用していると想定される）を使用してアクセスしようとしています。したがって、入力ボックスにid要素を追加します。

<input type="hidden" name="txtname" id="txtname"  value="test">

そして、expascarelloが言ったように、送信ボタンのデフォルトの動作を停止する必要があります。それ以外の場合は、通常のフォーム投稿を行うため、ajax効果を感じることはできません。使用するpreventDefault

$(function(){
   $("#post").click(function(e) {
     e.preventDefault()
     alert("clicked");
        $("#comments").load("comments.asp", { 
         'name': $("#wysiwyg").val(), 
         'tel': $("#txtname").val()
        });
  });
});
于 2012-04-15T02:49:51.907 に答える
0

ボタンのクリックをキャンセルしていないため、フォームが送信され、ページがリセットされます。

$("#post").click(function(evt) {
    evt.preventDefault();
    ...

jQuery event.preventDefault()

load() メソッドは、ポストではなく取得を行います。

于 2012-04-15T02:44:43.803 に答える