Javascript （codeigniter）使用jquery调用控制器在视图中加载视图

情况是这样的。添加新注释后。它将附加在前面的注释之后

以下是我到目前为止的理论步骤这些代码尚未进行任何尝试。这正是添加新评论后页面将刷新的地方。

1. type comment then press comment button
2. button will trigger ajax and get the values from the view
3. ajax will call controller and pass the values
4. controller will pass the values to the model and then store
5. controller will call a view and pass the newly added comment to this view 
note: this view only holds the css of a comment line
6. display this view after the previous comment

到目前为止我的代码

jquery：

$('.comments').on('click','.btn', function(event){
        event.preventDefault(); 
        var post_id = $(this).prev('.targetpost').val().trim();
        var comment = $(this).closest('.comments').find('textarea').val();
        if($(this).closest('.comments').find('textarea').val() == ''){
            alert("Comment cannot be blank");
        } 
        else 
        {
            $.ajax({
                type: "POST",
                url: BASE_URL+'classes/addcomment',
                dataType: 'json',
                data: {post_id: post_id, comment: comment},
                async: false
        }); 
        //i'm planning to call the controller here then load the view after the previous comment so no more refreshing of page
        location.reload();
    }   
    });

控制器：

public function addcomment(){
    $data = array(
        'user_id' => $this->user_id,
        'post_id' => $this->input->post('post_id'),
        'content' => $this->input->post('comment')
    );
    $this->Comment_model->addcomment($data);
    //load a view and pass the values of the new comment then load this view inside the view using jquery
}

评论部分html

<div class="panel-body"><!-- the whole comment section -->
    <div class="tabbable-line">
        <ul class="nav nav-tabs ">
            <li class="active">
                <a href="#tab_1" data-toggle="tab">
                Comments </a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab_1">
                <!-- POST COMMENTS -->
                <div class="form-group prevcomments"><!-- comments are looped using php and are displayed here -->
                    <div class="col-md-12">
                        <ul class="media-list">
                            <li class="media">
                                <a class="pull-left" href="javascript:;">
                                <img class="todo-userpic" src="../../assets/admin/layout2/img/avatar8.jpg" width="27px" height="27px">
                                </a>
                                <div class="media-body todo-comment">
                                    <p class="todo-comment-head">
                                        <span class="todo-comment-username">John Doe</span> &nbsp; <span class="todo-comment-date">Jan 1, 1970 at 9:00am</span>
                                    </p>
                                    <p class="todo-text-color content">
                                        <?php echo nl2br($comment->content);?>  
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <?php }}} 
                    $this->load->view('pages/new_comment'); // where new comment will appear
                ?>                                                              
                <!-- END POST COMMENTS -->
                <!-- POST COMMENT FORM -->
                <form method="post" class="comments"><!-- where user types new comment -->
                <div class="form-group">
                    <div class="col-md-12">
                        <ul class="media-list">
                            <li class="media">
                                <img class="todo-userpic pull-left" src="../../assets/admin/layout2/img/avatar4.jpg" width="27px" height="27px">
                                <div class="media-body">
                                    <textarea></textarea>
                                </div>
                            </li>
                        </ul>
                        <input type="hidden" value="<?php echo $post->post_id;?>" class="targetpost">
                        <button type="submit" class="pull-right btn btn-sm btn-circle green-haze">Comment</button>
                    </div>
                </div>
                </form>
                <!-- END POST COMMENT FORM -->
            </div>
        </div>
    </div>
</div>

约翰·多伊1970年1月1日上午9:00









你就快到了。您唯一错过的是ajax中的success（）。
在控制器中，
echo
要在主视图中加载的内容。然后使用
.html（）
在视图中插入数据

$.ajax({
    type: "POST",
    url: BASE_URL+'classes/addcomment',
    dataType: 'json',
    data: {post_id: post_id, comment: comment},
    async: false,
    success: function(data) {//data will have what ever you echo'ed in controller
       alert(data)                
       $("#innerView").html(data);// you can add that html to your inner view

    }

});

在ajax成功中，您可以在另一个视图中加载视图。但是ajax将调用控制器，然后该控制器将调用模型并存储值。在存储之后，控制器应该加载一个将被追加的视图。那么，有可能在ajax成功中调用一个控制器吗？不要在同一个控制器中调用另一个控制器，加载您想要的视图。请参考下面的答案。最好的方法是保持页面的结构应该是父-子结构，就像在ajax调用上保持子div在默认情况下不可见一样创建子结构并将其附加到父结构我不太明白这一行
$（“#innerView”）.html（数据）<代码>#innerView
将包含新注释，对吗？这是要附加在前面的评论之后吗？这是
html（数据）
。我应该在哪里指定新注释的css，或者它仍然是必需的？有了新注释，您将附加到以前的注释中？？无需再次指定css，因为新注释是必需的类和id。是的。就像在facebook上一样。或者在这里。添加新注释时，它将附加在您回复的注释之后。您的所有注释都有一个父级
div
？？
$.ajax({
    type: "POST",
    url: BASE_URL+'classes/addcomment',
    dataType: 'json',
    data: {post_id: post_id, comment: comment},
    async: false,
    success: function(data) {//data will have what ever you echo'ed in controller
       alert(data)                
       $("#innerView").html(data);// you can add that html to your inner view

    }

});