显示从数据库返回的数组数据而不刷新页面

时间:2017-03-07 10:18:37

标签: php jquery ajax

我制作了一个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.");
        }

    });
}); 

最后这是我的功能,我插入并选择我的数据&#39; s:

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);

3 个答案:

答案 0 :(得分:0)

您所描述的声音可以通过使用不同的技术/方法来解决。例如,如果您要向服务器发布AJAX请求以创建帖子,您只需返回创建的帖子并更新您的页面(使用jQuery,vanilla JavaScript或任何手头的框架)。您可能还希望进行某种服务器端推送(Web套接字,长轮询等)。

如果您有兴趣将实时通知整合到您的网页,我首先要了解一些服务,例如pusher.compubnub.com。这些服务允许您订阅从您的服务器触发的事件,因此您可以倾听&#39;更改您感兴趣的帖子。例如,您可以创建一个频道服务器端来广播您帖子的更改。然后,在客户端上,您可以订阅 这样的频道,并在有应该显示的更新时轻松收到通知。这可以在10行以下实现,所以它非常值得。

顺便说一下。这两项服务都提供免费套餐,非常适合中小型项目。我自己已经在高达1万用户的生产应用程序中使用它们而无需支付一分钱,因此它们可能非常适合您的情况

答案 1 :(得分:0)

您的请求的ajax结果是JSON。因此,您需要使用javascript数组结果重新创建注释的HTML。您可以使用jQuery创建HTML标记并附加到#comments div

答案 2 :(得分:0)

只需刷新ajax成功后的div

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