jQueryでイベントの後にdbに格納して新しいdivに結果を追加するにはどうすればいいですか？

Question

私はソーシャルグループの壁を管理しており、ページをリフレッシュせずにグループウォールをダイナミックにするための解決策を見つけようとしています。テキストエリアがあり、ポストボタンをクリックしたいとき。データはデータベースに保存されていると私はすでにそれを投稿したテキストを検索したいページさわやかにされています。ここでは

をスクリプトです：

<script> 
      $(document).ready(function() { 
       $("#btnpost").click(function() { 
        $("#publication").prepend('<div class="panel panel-success rounded shadow" style="text-align: left;margin-bottom: 5px;">' + 
            '<div class="panel-heading no-border">'+ 
            '<div class="pull-left half">'+ 
            '<div class="media" style="text-align: left;">'+ 
            '<div class="media-object pull-left" style="margin-top: 35px;">'+ 
          '<img src="http://bootdey.com/img/Content/avatar/avatar2.png" style="width: 40px;height: 40px;">' + 
          '</div>'+ 
          '</div>'+ 
            '</div>'+ 
          '<a href="">test profile</a>'+ 
          '<span class="text-white h6" style="display: block; color: black;">on 8th June, 2014</span>'+ 
          '<br>'+ 
          '<span style="color: black;margin-bottom: 10px;word-break: break-all ">#wonderful place man congratulationhh </span>'+ 
          '</div>'+ 
        '</div>'+ 
        '<div class="panel-footer">'+ 
        '<form action="#" class="form-horizontal">'+ 
          '<div class="form-group has-feedback no-margin">'+ 
          '<input class="form-control" type="text" placeholder="Votre commentaire ici..." style="width: 95%;margin-left: 10px;">'+ 
          '</div>'+ 
          '</form>'+ 
          '</div>'); 
       }); 
      }); 
     </script> 

私は、データが格納されて作ることができる方法を見つけたいですそのdiv要素で、ここですべてのコードを見ずに

Answer 1

は一例であり

user_id, title, posttextは、ユーザー入力に単なるテキストフィールドです。 user_idは、データベースに送信するときにユーザーを識別できるようになっています。

これらの値をPOSTとしてスクリプトに送信します。この例ではpost.phpですが、何でも使用できます。

POSTが戻ってくると、ajaxは結果をdataに返信しますが、これは返品方法や必要に応じて異なります。区切り文字で送り返すか、split()を使用して爆発させるか、jsonとして送り返すことができます。

この方法ではページが更新されず、ページのデータが正しく生成されます。

<script> 
$(document).ready(function() { 
    $("#btnpost").click(function() { 
     // get user data input 
     var user_id = $('#user_id').val(); 
     var title = $('#title').val(); 
     var posttext = $('#posttext').val(); 

     // send data to db with post 
     $.ajax({ 
      type: "POST", 
      url: "post.php?", 
      data:"user_id="+ user_id+ 
      "&title="+ title+ 
      "&posttext="+ posttext 
      success: function (data) { 
       // on successful return data and prepend 
       $("#publication").prepend(
        '<div class="panel panel-success rounded shadow" style="text-align: left;margin-bottom: 5px;">' + 
        '<div class="panel-heading no-border">'+ 
        '<div class="pull-left half">'+ 
        '<div class="media" style="text-align: left;">'+ 
        '<div class="media-object pull-left" style="margin-top: 35px;">'+ 
        '<img src="http://bootdey.com/img/Content/avatar/avatar2.png" style="width: 40px;height: 40px;">' + 
        '</div>'+ 
        '</div>'+ 
        '</div>'+ 
        '<a href="">test profile</a>'+ 
        '<span class="text-white h6" style="display: block; color: black;">on 8th June, 2014</span>'+ 
        '<br>'+ 
        '<span style="color: black;margin-bottom: 10px;word-break: break-all ">#wonderful place man congratulationhh </span>'+ 
        '</div>'+ 
        '</div>'+ 
        '<div class="panel-footer">'+ 
        '<form action="#" class="form-horizontal">'+ 
        '<div class="form-group has-feedback no-margin">'+ 
        '<input class="form-control" type="text" placeholder="Votre commentaire ici..." style="width: 95%;margin-left: 10px;">'+ 
        '</div>'+ 
        '</form>'+ 
        '</div>' 
       ); 
      } 
     });  
    }); 
}); 
</script>