如何使用 jQuery .Ajax 和 Codeigniter 3 重新加载部分视图

Question

我有一个 table 为 "notes" 的局部视图。当我提交新笔记时，我只想重新加载部分视图并显示我的新笔记，这样我就不必刷新整个页面。

我已将注释插入到数据库中，并且 ajax 调用正常，但是在 .ajax 成功时，我目前正在调用 location.reload()。相反，我想调用我的局部视图并替换之前调用的视图生成的 html "view edit_employee"。

非常感谢任何解决此问题的帮助，感谢您花时间查看我的代码。

查看

       <div class="col-md-6 col-lg-6">
            <div class="panel panel-default">

                <div class="panel-title">
                    Notes
                </div>
                
                
                <div class="panel-body">
                    <div id="notesList">
                        <?php $this->load->view("partial_views/note_list"); ?>
                    </div>
                    <form id="noteForm" class="form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <textarea class="form-control" rows="3" id="noteText" placeholder="Write a new note here..." required></textarea>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <div class="col-sm-12">
                                <button type="submit" name="addNoteSubmit" id="addNoteBtn" class="btn btn-primary" style="width:100%;">Add Note</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
        
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#noteForm").submit(function(e) {
            e.preventDefault();
            $.ajax({
                url: "<?php echo base_url("human_resources/add_note/".$contact->contact_id); ?>",
                type: "post",
                data: "noteText="+$("#noteText").val(),
                dataType: "text",
                success: function (data) {
                    alert(data);              
                    location.reload();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        });
</script>

局部视图

<?php if($notes != null): ?>
    <a href="#" id="deleteCheckedBtn" class="btn btn-danger float-r"><i class="fa fa-check"></i>Delete Checked</a>
    <table class="table table-hover">
        <thead>
            <tr>
                <td class="text-center"><i class="fa fa-trash"></i></td>
                <td>ID</td>
                <td>Note</td>
                <td>Date</td>
            </tr>
        </thead>
        <tbody>
            <?php foreach($notes as $note): ?>
                <tr>
                    <td class="text-center"><div class="checkbox margin-t-0"><input id="<?php echo "note".$note['note_id'] ?>" type="checkbox" name="noteItem" value="<?php echo $note['note_id'] ?>"><label for="<?php echo "note".$note['note_id'] ?>"></label></div></td>
                    <td>#<b><?php echo $note['note_id']; ?></b></td>
                    <td width="70%"><?php echo $note['note']; ?></td>
                    <td width="20%"><?php echo date("m/d/Y", strtotime($note['created_date'])); ?></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
<?php endif; ?>

控制器

public function add_note($contact_id) {
    $this->Note_model->create($contact_id);
        
    $data['notes'] = $this->Note_model->read($contact_id);
    $view = $this->load->view('partial_views/note_list', $data, TRUE);
    return "{hello: world}";
}

型号

<?php

class Note_model extends CI_Model {
    
    public $note_id;
    public $contact_id;
    public $note;
    public $created_date;
    
    public function __construct() {
        // Call the CI_Model constructor
        parent::__construct();
    }
    
    public function create($id = null) {
        if($id != null) {
            $data = array(
                'note_id' => null,
                'contact_id' => $id,
                'note' => $this->input->post("noteText"),
                'created_date' => date("Y-m-d")
            );
            $this->db->insert('note', $data);
        }
    }
    
    public function read($id = null) {
        if($id != null) {
            $query = $this->db->get_where('note', array('contact_id' => $id));
            return $query->result_array();
        }
    }
    
    public function update() {
        
    }
    
    public function delete() {
        $checkbox_list = $this->input->post("checkboxs");
        foreach($checkbox_list as $checkbox_id) {
            $this->db->delete('note', array('note_id' => $checkbox_id));
        }
        
    }
}

Answer 1

你快到了。正如您所说，您需要将成功功能上的 location.reload() 替换为 something 部分加载 [=18= 的一部分]一些html。 'something' 是 jQuery .load() 方法。它是这样工作的：

$( "#container_to_load" ).load( "/url_to_get #fragment_of_url_to_get" );

您可能想在 HTML 上添加几个 ID，以便更好地控制您正在加载的页面片段。此外，如果您需要对加载的片段进行一些交互，请记住使用 jQuery 'click' 无法访问加载的元素。您需要使用 .on() 访问它们并通过已加载片段的祖先访问它们。

查看 jQuery .load() 了解有关此方法的更多信息。

Answer 2

试试这个

<script>
    $(document).ready(function() {
        $("#noteForm").submit(function(e) {
            e.preventDefault();
            $.ajax({
                url: "<?php echo base_url("human_resources/add_note/".$contact->contact_id); ?>",
                type: "post",
                data: "noteText="+$("#noteText").val(),
                dataType: "text",
                success: function (data) {
                    alert(data);              
                    window.location.href = 'url';
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        });
</script>

如何使用 jQuery .Ajax 和 Codeigniter 3 重新加载部分视图

How to reload partial view with jQuery .Ajax and Codeigniter 3

jquery

ajax

codeigniter-3