javascript - 在 codeigniter 中使用 ajax 单击按钮时更新成功后显示确认

Question

我的问题是如何在单击按钮后显示确认消息而不刷新页面。我的代码正在工作，但是当我单击按钮时，页面总是刷新。我知道 ajax 是如何工作的，但我是 ajax 的新手。还有一件事，提交按钮后，我的 url 更改为 admin_home/librarian_msg，而不是 http:localhost/webitefoler/admincontroller。

在 View admin_page.php

  <?php echo form_open('admin_home/librarian_msg');
   echo form_label('Librarians Message');?>
    <textarea class="form-control" name="the_librarian">   </textarea>
    <?php echo form_submit('submit', 'Update',"class='btn btn- success navbar-btn'");?>
                <?php echo form_close();
                ?>

                <div class="alert alert-success">
                <?php echo $message_display;?>
   <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;     </a>

在 Controller admin_home.php中

 public function librarian_msg()
  {
    $data['title'] = 'some text here';
        // Check validation for user input in SignUp form
 $this->form_validation->set_rules('the_librarian', 'Message',  'trim|required|xss_clean');
 $message = $this->input->post('the_librarian');
 $result = $this->home_admin_database->librarian_msg_insert($message);
 if ($result == TRUE) {

 $data['message_display'] ='Message Updated';
  $this->load->view('admin_page', $data);
  } else {
  $data['message_display'] = 'Update Failed';
   $this->load->view('admin_page', $data);
 }

 }

在模型中home_admin_database.php

public function librarian_msg_insert($data) {
$message = array(
           'message' => $data,
        );
// Query to insert data in database
 $this->db->where('lm_id', '1');
$this->db->update('librarians_message', $message);
 if ($this->db->affected_rows() > 0) {
 return true;
 }
 else {
 return false;
 }
 } 

帮帮我...

Answer 1

尝试使用此 JavaScript 代码来提交您的表单:-在下面的代码中使用您的表单 ID 而不是 #your_form_id。在下面的代码中使用您的状态消息 div id 代替 your_status_message。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
         $("#your_form_id").submit(function(e)
        {
            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            $.ajax(
            {
                url : formURL,
                type: "POST",
                data : postData,
               beforeSend: function(){
                   // Append status message to the div
                   $('#your_status_message').append('Sending....');


               },
              complete: function(){
                   // Append success message to the div
                   $('#your_status_message').append('Complete....');
              },              
                success:function(data, textStatus, jqXHR) 
                {

                   $('#your_status_message').append('Success....');
                },
                error: function(jqXHR, textStatus, errorThrown) 
                {

                }
            });
            e.preventDefault(); //STOP default action
            e.unbind(); //unbind. to stop multiple form submit.
        });
</script>