javascript - 添加帖子并显示它而不刷新页面 Codeigniter？

标签 javascript php jquery codeigniter

大家好，我正在使用 Codeigniter 3.0.3

在我的项目中，有一堵墙可以通过 json jquery 数据共享帖子，当有人发布新帖子时，我看到很多网站，它会显示在同一页面中，而无需刷新页面，如果我使用 jquery 成功发布数据，我就可以做到这一点window.location.reload(true); 当数据发布成功时，我需要 jquery 添加一个新的 foreach 循环，我搜索了越来越多的内容，但没有提供有用的答案

这是我的代码

Controller :

    function AddPost()
    {

        $this->load->helper('string');
        $this->load->helper('date');
        $this->load->model('users_model');
        $query = $this->users_model->addnewpost();

        if($query == TRUE)
        {
            echo 'true';
        }
        else
        {
            echo 'false';
        }

    }

型号:

function addnewpost () {

    $data = array (
        'pid'           =>      random_string('numeric', 16),
        'post_author'   =>      $this->session->userdata('username'),
        'post_date'     =>      gmt_to_local(),
        'post_text'     =>      $this->input->post('post_text'),
        'author_id'     =>      $this->session->userdata('id'),
        'author_ip'     =>      $this->input->ip_address()
    );

    $query = $this->db->insert('users_posts', $data);

    if($query == true) {

        $this->db->set('u_posts', 'u_posts+1', FALSE);
        $this->db->where('uid', $this->session->userdata('id'));
        $this->db->update('confirmed_users');

        return true;
    } else {
        return false;
    }

}

查看:

<!-- post status panel -->

<div class="panel panel-default">
    <div class="panel-body">
        <form name="addnewpostajax" class="addnewpostajax" method="post" role="form">
            <label for="StatusText"><strong>Update status</strong></label>
            <textarea class="form-control StatusText" name="StatusText"></textarea>
            <hr class="myown">
            <div class="btn-group">
                <a class="btn btn-default btn-sm"><span class="fa fa-image fa-lg"></span></a>
                <a class="btn btn-default btn-sm"><span class="fa fa-link fa-lg"></span></a>
                <a class="btn btn-default btn-sm"><span class="fa fa-video-camera fa-lg"></span></a>
            </div>
            <div class="pull-right">
                <button type="submit" name="postnewstatus" class="btn btn-default btn-sm">Post</button>
            </div>
        </form>
        <div class="clear"></div>
    </div>
</div>

<!-- / post status panel -->

<!-- status panel -->


<?php if($allposts): ?>
    <?php foreach ($allposts as $post): ?>
        <div class="panel panel-default" style="border-radius:0;">
            <div class="panel-body">
                <div class="col-md-12" style="padding: 0;">
                    <img class="img-rounded pull-left" src="<? echo base_url($post->image) ?>" width=30px height=30px>
                    <div style="margin-top: 5px;">
                        <a href="<? echo base_url('home?p=Profile&u='.$post->post_author) ?>"><small style="margin-left: 5px;"><?=$post->post_author?></small></a>
                        <span style="font-size: 75%;" class="text-muted pull-right"><span class="fa fa-clock-o"></span>
                        <?php $post_date = $post->post_date; $now = time(); $units = 1; ?>
                            <? echo timespan($post_date, $now, $units) ?>
                                ago</span>
                    </div>
                </div>
                <div class="clear"></div>
                <hr class="myown">
                <div class="col-md-12 text-muted"><small><?=$post->post_text?></small></div>
                <div class="clear"></div>
                <hr class="myown">
                <div class="btn-group">
                    <?php if($this->users_model->liked($post->pid)): ?>
                        <a class="btn btn-default btn-sm disabled"><span class="fa fa-check"></span> Liked</a>
                        <?php else: ?>
                            <a class="btn btn-default btn-sm like-btn" post-id="<?=$post->pid?>"><span data-toggle-tooltip="tooltip" data-placement="top" title="Like" class="fa fa-thumbs-up fa-lg"></span></a>
                            <?php endif; ?>
                                <a class="btn btn-default btn-sm" data-toggle="collapse" data-target="#<?=$post->pid?>Comment"><span data-toggle-tooltip="tooltip" data-placement="top" title="Comment" class="fa fa-comment fa-lg"></span></a>
                                <a class="btn btn-default btn-sm"><span data-toggle-tooltip="tooltip" data-placement="top" title="Share" class="fa fa-share fa-lg"></span></a>
                </div>
                <div class="pull-right-custom text-muted"><small><?=$post->post_likes?> Like - <?=$post->post_comments?> Comment</small></div>
                <div class="clear"></div>
                <div id="<?=$post->pid?>Comment" class="collapse">
                    <br>
                    <form name="addcommentajax" post-id="<?=$post->pid?>" class="form-horizontal addcommentajax" role="form" method="POST">
                        <div class="input-group">
                            <input type="text" class="form-control input-sm comment-<?=$post->pid?>" post-id="<?=$post->pid?>" placeholder="Add Comment">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-sm btn-default">Publish</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
            <?Php if (!empty($postcomments)):?>
                <?php foreach ($postcomments as $comment): ?>
                    <?php if (!empty($comment->post_id == $post->pid)): ?>
                        <? echo '<img class="img-rounded pull-left" src="'.base_url($comment->image).'" width="35px" height="35px" style="margin:3px 5px 3px 5px;">'; ?>
                            <? echo '<div class="panel-footer">'; ?>
                                <? echo '<small class="text-muted"><a href="'.base_url('home?p=Profile&u=').$comment->username.'">'.$comment->username.'</a> '.$comment->comment_text.'</small>'; ?>
                                    <? echo '<small style="margin-top: 2.5px;" class="pull-right text-muted">' . timespan($comment->comment_date, time(), 1) . '</small>'; ?>
                                        <? echo '</div>'; ?>
                                            <?php endif; ?>
                                                <?php endforeach; ?>
                                                    <?php endif; ?>
        </div>
        <?php endforeach; ?>
            <?php endif; ?>

                <!-- / status panel -->

最后这是我的 JavaScript 代码:

<script type="text/javascript">
$(document).ready(function() {
    $('.addnewpostajax').submit(function() {
        var post_text = $('.StatusText').val();
            jQuery.ajax({
                type: "POST",
                url: "<?php echo base_url('home/AddPost'); ?>",
                dataType: "json",
                data: {post_text},
                success: function(posted) {
                    if(posted == true) {
                        window.location.reload(true);
                    } else {
                        alert('Faild');
                    }
                }
            });
    });
});
</script>

谢谢大家

最佳答案

基本上，您需要附加刚刚添加的新帖子。

使用单个帖子 block 创建一个 View ，该 View 出现在您的 foreach 中:

//single-post-block.php

<div class="panel panel-default post-block" style="border-radius:0;">
            <div class="panel-body">
                <div class="col-md-12" style="padding: 0;">
                    <img class="img-rounded pull-left" src="<? echo base_url($post->image) ?>" width=30px height=30px>
                    <div style="margin-top: 5px;">
                        <a href="<? echo base_url('home?p=Profile&u='.$post->post_author) ?>"><small style="margin-left: 5px;"><?=$post->post_author?></small></a>
                        <span style="font-size: 75%;" class="text-muted pull-right"><span class="fa fa-clock-o"></span>
                        <?php $post_date = $post->post_date; $now = time(); $units = 1; ?>
                            <? echo timespan($post_date, $now, $units) ?>
                                ago</span>
                    </div>
                </div>
                <div class="clear"></div>
                <hr class="myown">
                <div class="col-md-12 text-muted"><small><?=$post->post_text?></small></div>
                <div class="clear"></div>
                <hr class="myown">
                <div class="btn-group">
                    <?php if($this->users_model->liked($post->pid)): ?>
                        <a class="btn btn-default btn-sm disabled"><span class="fa fa-check"></span> Liked</a>
                        <?php else: ?>
                            <a class="btn btn-default btn-sm like-btn" post-id="<?=$post->pid?>"><span data-toggle-tooltip="tooltip" data-placement="top" title="Like" class="fa fa-thumbs-up fa-lg"></span></a>
                            <?php endif; ?>
                                <a class="btn btn-default btn-sm" data-toggle="collapse" data-target="#<?=$post->pid?>Comment"><span data-toggle-tooltip="tooltip" data-placement="top" title="Comment" class="fa fa-comment fa-lg"></span></a>
                                <a class="btn btn-default btn-sm"><span data-toggle-tooltip="tooltip" data-placement="top" title="Share" class="fa fa-share fa-lg"></span></a>
                </div>
                <div class="pull-right-custom text-muted"><small><?=$post->post_likes?> Like - <?=$post->post_comments?> Comment</small></div>
                <div class="clear"></div>
                <div id="<?=$post->pid?>Comment" class="collapse">
                    <br>
                    <form name="addcommentajax" post-id="<?=$post->pid?>" class="form-horizontal addcommentajax" role="form" method="POST">
                        <div class="input-group">
                            <input type="text" class="form-control input-sm comment-<?=$post->pid?>" post-id="<?=$post->pid?>" placeholder="Add Comment">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-sm btn-default">Publish</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
            <?Php if (!empty($postcomments)):?>
                <?php foreach ($postcomments as $comment): ?>
                    <?php if (!empty($comment->post_id == $post->pid)): ?>
                        <? echo '<img class="img-rounded pull-left" src="'.base_url($comment->image).'" width="35px" height="35px" style="margin:3px 5px 3px 5px;">'; ?>
                            <? echo '<div class="panel-footer">'; ?>
                                <? echo '<small class="text-muted"><a href="'.base_url('home?p=Profile&u=').$comment->username.'">'.$comment->username.'</a> '.$comment->comment_text.'</small>'; ?>
                                    <? echo '<small style="margin-top: 2.5px;" class="pull-right text-muted">' . timespan($comment->comment_date, time(), 1) . '</small>'; ?>
                                        <? echo '</div>'; ?>
                                            <?php endif; ?>
                                                <?php endforeach; ?>
                                                    <?php endif; ?>
        </div>

您可以通过 Controller 中的ajax渲染 View :

function AddPost()
    {

        $this->load->helper('string');
        $this->load->helper('date');
        $this->load->model('users_model');
        $query = $this->users_model->addnewpost();
        // here you need to get post details to pass in view
        $data = $this->users_model->postDetails();
        if($query == TRUE)
        {
            echo $this->load->view('signle-post-block',$data,TRUE);
        }
        else
        {
            echo 'false';
        }

    }

您的 JavaScript 函数应如下所示:

<script type="text/javascript">
$(document).ready(function() {
    $('.addnewpostajax').submit(function() {
        var post_text = $('.StatusText').val();
            jQuery.ajax({
                type: "POST",
                url: "<?php echo base_url('home/AddPost'); ?>",
                dataType: "html",
                data: {post_text},
                success: function(posted) {
                    if(posted != false) {
                        $('.post-block').last().after(posted);
                    } else {
                        alert('Faild');
                    }
                }
            });
           e.preventDefault();
    });
});
</script>

我刚刚复制了您的代码，以较少的努力使其成为您想要的，您可以根据自己的情况进行更改。

关于javascript - 添加帖子并显示它而不刷新页面 Codeigniter？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34499750/

上一篇：javascript - AngularJS，如何使两个输入字段的总和在动态变化时始终等于第三个输入？

下一篇：javascript - 如何在 Jquery-Steps 中刷新页面时保持同一向导？

相关文章：

php - 错误 : php55w-common conflicts with php-common on CentOS 6. 5

jquery - 如何检测div是否有滚动条？

javascript - 使用 Django、Ajax、jQuery 提交表单而不刷新页面？

jquery - ASP.NET 中的交互式仪表板

javascript - 为什么我不能从开发工具控制台删除这个 cookie？

javascript - 为什么这个内存实现对匿名函数有效，但对声明的函数无效？

php - 在 mysql JOIN 查询后获取列行的总和

javascript - 一个 html 文件中的多个 slider

javascript - 悬停效果不会触发底层元素？

php - 如何在服务器上安全地存储sql dbs

©2024 IT工具网  联系我们