2017-03-07 63 views
0

我做了一個Facebook風格的發佈和評論頁面,用戶可以發佈帖子並對帖子發表評論。顯示從數據庫返回的數組數據,無需刷新頁面

我的第一個問題是當我試圖對帖子發表評論時,插入到我的數據庫中的postID是最新的帖子,即使我對不同的postID發表評論。

接下來的問題是我想實現的是,在發表評論後,即使我不刷新頁面,評論部分也會彈出評論。我已經嘗試尋找一種可能的解決方案,但沒有一種符合我想要做的。

這裏是我的網頁代碼:

post.php中

<?php 

foreach ($post_model->getcomment($postid) as $value) { 
    if($postid == $value['post_uid']){ 
     ?> 
     <div id="mycomments" class="col-lg-12" style="background:#eff9c7;"> 
      <img src="./<?php echo $session_image?>" class="pull-left" style="border-radius:50%;margin-top:10px;" width="7%" height="7%" /> 
      <p style="margin-top:18px;line-height:15px;"><strong class="font-1" style="margin-left:10px;"><?php echo $session_fname.' '.$session_lname?></strong> <?php echo $value['pc_comment']?><br> 
       <span class="" style="margin-left:10px;font-size:.9em;color:gray;"><abbr class="timeago" title="<?php echo $value['pc_datesend']?>"></abbr></span> 
      </p> 
     </div> 
     <?php 
    } 
} 
?> 

<div class="col-lg-12" style="background:#eff9c7;"> 
    <!-- <img src="../img/icons/no-icon-available.png" class="pull-left" style="border-radius:50%;margin-top:10px;" width="7%" height="7%" />--> 
    <input type="text" name="mycomment" id="mycomment" class="form-control pull-right" style="width:92%;margin-top:17px;" placeholder="Comments..." /> 
</div> 

下面的代碼將我的評論發送到我的數據庫:

$(document).ready(function() { 

    $('input[name="mycomment"]').on('keyup', function(e){ 

    e.preventDefault(); 
    var comments = $(this).val(); 
    var sid = $("#sid").val(); 
    var ses_image = <?php echo json_encode($session_image); ?>; 
    var ses_fname = <?php echo json_encode($session_fname); ?>; 
    var ses_lname = <?php echo json_encode($session_lname); ?>; 

    if(e.keyCode == 13){ 
     if(comments.length){ 
      $.ajax({ 
       url: "../controller/post_controller.php", 
       type: "POST", 
       data:{ 
        "id":sid, 
        "comments":comments, 
        "image":ses_image, 
        "fname":ses_fname, 
        "lname":ses_lname 
       }, 
       dataType: "json", 
       success: function(data){ 
        alert(Object.keys(data).length); 
        comments = ''; 
        $("#sid").val(''); 
        $("#mycomments").append(); // i dont know what to put here 
       } 
      }); 

     else 
      alert("Please write something in comment."); 
     } 

    }); 
}); 

,最後這個我功能,我插入並選擇我的數據:

class post { 

    public $dbh; 

    public function __construct(PDO $dbh){ 
     $this->dbh = &$dbh; 
    } 

    function comment($postuid,$uimage,$ufname,$ulname,$comment){ 
     $sql = "INSERT INTO pcomment (post_uid,pc_uimage,pc_ufname,pc_ulname,pc_comment,pc_datesend) VALUES('$postuid','$uimage','$ufname','$ulname','$comment',NOW())"; 
     $query = $this->dbh->prepare($sql); 
     var_dump($query); 
     $result = ($query->execute()? true :false); 
     return $result; 
    } 

    function getcomment($mmyid){ 
     $sql = "SELECT * FROM pcomment WHERE post_uid = '$mmyid'"; 
     $stmt = $this->dbh->prepare($sql); 
     $stmt->execute(array("0")); 
     $active_data = $stmt->fetchAll(PDO::FETCH_ASSOC); 
     return $active_data; 
    } 
} 

Controller.php這樣

if(session_id() == '' || !isset($_SESSION)) 
    session_start(); 
$session_id = $_SESSION['id']; 
require_once('../model/dbconfig.php'); 
require_once('../model/post.php'); 
$database = new Database(); 
$conn = $database->getConnection(); 
$com = new post($conn); 
$comments = ($_POST['comments']); 
$uid = ($_POST['id']); 
$pc_uimage = ($_SESSION['image']); 
$pc_ufname = ($_SESSION['firstname']); 
$pc_ulname = ($_SESSION['lastname']); 

if(isset($_POST['id']) && isset($_POST['comments'])) 
{ 
    $res = $com->comment($uid,$pc_uimage,$pc_ufname,$pc_ulname,$comments); 
} 

$res = $com->getcomment($uid); 
echo json_encode($res); 

回答

0

你描述的聲音是什麼樣的可以通過使用不同的技術/方法來解決。例如,如果您將AJAX請求發佈到服務器進行創建後,您可以返回創建的帖子並更新您的頁面(使用jQuery,vanilla JavaScript或任何其他框架)。您可能還想要某種服務器端推送(Web套接字,長輪詢等)。

如果您有興趣將實時通知集成到您的頁面,我會先看看pusher.compubnub.com等服務。這些服務允許您訂閱從您的服務器觸發的事件,以便您可以「聽」您感興趣的帖子中的更改。例如,您可能會創建一個頻道服務器端,以便對您的帖子進行廣播更改。然後,在客戶端上,您可以訂閱 這樣的頻道,並在應該顯示更新時輕鬆通知。這可以用10行來實現,所以它確實值得。

順便說一句。這兩項服務都提供免費的服務,非常適合中小型項目。我自己已經在生產應用程序中使用它們,無需支付一毛錢,因此它們可能對您的案例來說非常完美

0

您的請求的ajax結果是JSON。所以你需要用你的javascript數組結果重新創建你的評論的HTML。您可以使用jQuery來創建HTML標記,並追加到#comments DIV

0

只刷新後阿賈克斯成功DIV

jQuery("#your_div").load(refreshurl , function() { 
    // do. stuff 
}); 
相關問題