投稿IDからのajax呼び出しの作成

Question

フォームのアクションでハードコードされたPHPページに現在投稿されているフォームがありますが、これは問題なくDBに投稿されますが、私は新しいページに投稿したくないので、私はajaxを使うことにしました。だから私はフォームからアクションフィールドを取り除き、ajax呼び出しを行うためにいくつかのjqueryを入れました。私が持っている問題はうまくいきます。うまくいかない：D。誰かが私のjsファイルを見て、私が間違ってやっていることややるべきことを私に説明できますか？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"> 

    <form> 
     <p>Comment</p> 
     <textarea name= "comment" rows="6" cols="50"></textarea><br /> 
     <input type="submit" name= "submit" value="submit" id = "submit"> 
    </form> 

$('#submit').on('click',function(){ 
 
     $.ajax({ 
 
      type  : 'POST', 
 
      url   : 'comment.php', 
 
      data  : formData, 
 
      dataType : 'json', 
 
     }) 
 
    });

Answer 1

あなたは、送信ボタンの 'クリック' イベントを超えるフォームの '提出' イベントを処理する必要があります。フォームが新しいページに転記されないようにするには、機能の最後にreturn false;も指定する必要があります。あなたは自分自身を提出しています。また、クライアントでJavaScriptが無効になっているまれに、action属性をフォーム要素に戻します。フォームにIDとターゲットを与えます。あなたのコードはそうでなければ正しくなります。

HTML

<form id="my-form" action="comment.php" method="post"> 
     <!-- input fields --> 
    </form> 

はJavaScript

form要素に action属性だけでなく、 method属性は、あなたの提出ハンドラ内でのアクセスにこれらを利用できるようになります提供

$('#my-form').on('submit', function(){ 
     // code... 

     return false; 
    }); 

また、JavaScriptの障害に対して適切なフォールバックを提供します。このインスタンスには必要ではないかもしれませんが、将来役立つかもしれません。

今、このようなものになりますあなたのハンドラ：

JavaScriptを

$('#my-form').on('submit', function(){ 

     // serialize the form 
     var formData = $(this).serialize(); 

     $.ajax({ 
      type  : this.method, 
      url   : this.action, 
      data  : formData, 
      dataType : 'json' 
     }) 
     .done(function (data) { 
      // do some stuff with 'data' 
     }) 
     .fail(function (error) { 
      // do some stuff with 'error' 
     }); 

     return false; 
    });