フォームデータを送信して、同じページにajaxを使用して動的に表示する方法

テキストエリアのフォームを持っています。データをテーブルに保存していますが、今度は同じページで動的にajaxで結果を表示したい私はjavascriptのフレームワークを使用しての強力な支持者ではないですフォームデータを送信して、同じページにajaxを使用して動的に表示する方法

<form action='' method='post''> 
 

 
<div class="form-group"> 
 
    <label for="comment"></label> 
 
    <textarea class="form-control" rows="5" id="comment" name='message_content' required></textarea> 
 
</div> 
 
                       
 
                       
 
<button type='submit' class='btn btn-default' name='send_msg'> 
 
                  send</button> 
 
</form>

出典

2016-08-08 arash rahimi

あなたは私たちにいくつかのコードを示してもらえ？何を試しましたか？あなたはjavascriptライブラリを使用していますか？ – vincenth

私はコードを追加しました私はこのフォームを持っていますテキストエリアの上の同じページにajaxを使って結果を表示したい –

いいえ私は何も使っていません –

をリロードせずにページを更新したいその平均は、しかし、アヤックスので、ここで、それなしで処理するための痛みである例でありますJQueryを使用していますが、他のフレームワークでも同じことが可能です。

最初のステップでは、送信イベントをインターセプトし、フォームデータを取得し、ajaxクエリを実行して結果をdivに表示します。

<!DOCTYPE doctype html> 
<html> 
    <head> 
    </head> 
    <script src="jquery-3.1.0.min.js"> 
    </script> 
    <script> 
     jQuery(document).ready(function() { 
      jQuery('#myForm').submit(function(e){ 
       e.preventDefault(); 

       jQuery.ajax({ 
        url: e.currentTarget.action, 
        data:{ 
         comment: jQuery('#comment').val() 
        } 
       }).done(function(data){ 
        console.log(data); 
        jQuery('#display-data').append(data); 
       }); 
      }); 
     }); 
    </script> 
    <body> 
     <form id="myForm" action="getData.php" method="post"> 
      <div class="form-group"> 
       <label for="comment"> 
       </label> 
       <textarea class="form-control" id="comment" name="message_content" required="" rows="5"> 
       </textarea> 
      </div> 
      <button class="btn btn-default" name="send_msg" type="submit"> 
       send 
      </button> 
     </form> 
     <div id="display-data"></div> 
    </body> 
</html>

EDIT：あなたのコメントから、私はあなたが提出した後にページをリロードしたかっ集まって、あなたのAJAXクエリの終わりの後にそれを行うことができます。

jQuery('#myForm').submit(function(e){ 
    e.preventDefault(); 

    jQuery.ajax({ 
     url: e.currentTarget.action, 
     data:{ 
      comment: jQuery('#comment').val() 
     } 
    }).done(function(data){ 
     document.location.reload(); 
    }); 
});

出典

2016-08-08 10:11:57 vincenth

あなたの返信はtnxと同じですが、私はあなたが私の平均を理解していないと思う私はあなたのソーシャルネットワークのIDをskypeやwhats appのように持っていますか？ –

私が誤解したことを教えてください。私はこのサイトで答えて、他の社会的な意味ではなく、その答えが他の人にとって有益かもしれない。 – vincenth

私は自分のソースを実際に私の質問を作成したソーシャルネットワークをチャットシステムについて教えていますが、私のシステムは完全なPHPであるため、メッセージを送信した後に毎回ページをリロードする必要がありますが、 ajaxまたはjquery –

フォームデータを送信して、同じページにajaxを使用して動的に表示する方法

答えて

関連する問題