Ajax 不断刷新整个页面，而不仅仅是评论部分

Question

我正在使用 codeigniter 开发一个项目，我决定在评论部分实现 ajax，以便在用户提交评论时不会刷新整个页面。评论会自动显示，但页面会不断刷新。我不知道我在这里做错了什么，但我们将不胜感激。

型号：

public function create_comments($post_id){
    $data = array(
        'post_id' => $post_id,
        'body' => $this->input->post('body'),
        'users_id' => $this->session->userdata('user_id')
    );
    return $this->db->insert('comments',$data);
} 

控制器：

public function create($post_id){

    //checking if user is logged in
    if(!$this->session->userdata('isLoggedIn')){
        redirect('users/login');
    }
    $slug = $this->input->post('slug');
    $data['post'] = $this->post_model->get_posts($slug);        
    $this->form_validation-> set_rules('body', 'Comment', 'required');

    if($this->form_validation->run() === FALSE){

        $this->load->view('templates/header');
        $this->load->view('posts/view', $data);
        $this->load->view('templates/footer');

        $this->session->set_flashdata('comment_error', 'comment field is empty comment');
        redirect('posts/'.$slug,'refresh');

    } else {
        $this->comments_model->create_comments($post_id);
            redirect('posts/'.$slug);
        }
    }

查看：

<?php echo form_open_multipart('comments/create/'.$post['id'], 'id="comnt"'); ?>
    <div class="panel-footer">
    <!--//THIS IS THE FIELD WHICH COMMENTS WOULD BE ADDED-->
        <div class="">
            <input type="hidden" name="slug" value="<?php echo $post['slug']; ?>">
            <small class="text-center text-danger"><?php echo form_error('body'); ?></small>
            <div class="input-field">   
                <textarea id="icon_prefix2" name="body" class="materialize-textarea" rows="3"></textarea>
                <label for="icon_prefix2">Comments</label>
            </div>
            <button class="btn waves-effect waves-light" type="submit" name="action" id="submit">comment <i class="material-icons right">send</i></button>
        </div>
    </div>
</form>

AJAX：

$('#submit').click(function() {
    var form_data = {
        body: $("#icon_prefix2").val()
    };
    $.ajax({
        url: "<?php echo base_url();?>comments/create",
        type: "POST",
        data: form_data,
        success: function(msg) {
            alert("msg");
        }
    });
    return true;
});

Answer 1

使用 jquery preventDefault() 函数防止你的表单被提交

$('#submit').click(function(e) {
   e.preventDefault();
   var form_data = {
       body: $("#icon_prefix2").val()
   };
   $.ajax({
       url: "<?php echo base_url();?>"+"comments/create",
       type: "POST",
       data: form_data,
       success: function(msg) {
           alert("msg");
       }
   });
   return true;
});

Answer 2

尝试使用done 属性来设置成功处理程序。此外，由于这是一个 DOM 元素上的事件，您应该在 DOM 准备好时附加它：

$(document).ready(function() {
    $('#submit').click(function(event) {
        var form_data = {
            body: $("#icon_prefix2").val()
        };
        $.ajax({
            url: "<?php echo base_url();?>comments/create",
            type: "POST",
            data: form_data,
        }).done(function(msg) {
            alert(msg);
        }).fail(jqXHR, textStatus) {
            alert('ERROR: ' + textStatus);
        });

        // return is not necessary here
        // return true;
    });

    $("#comnt").submit(function(e) { // Prevent the form submitting
        e.preventDefault();
    });
});

由于这已经附加了一个事件，您应该从您的按钮中删除 onclick="comment()" 属性：

<button class="btn waves-effect waves-light" type="submit" id="submit">comment
                                <i class="material-icons right">send</i>
                              </button>

Answer 3

试试这个希望它有效

 $('#submit').click(function(event) {
    e.preventDefault(); //stop actual action of browser
        var form_data = {
            body: $("#icon_prefix2").val()
        };
        $.ajax({
            url: "<?php echo base_url();?>comments/create",
            type: "POST",
            data: form_data,
            success: function(msg) {
                alert("msg");
            }
        });
        return true;
    });

更改按钮类型button 而不是submit

    <button class="btn waves-effect waves-light" type="button" name="action" id="submit">comment
<i class="material-icons right">send</i>
 </button>