Как отправить информацию в базу данных без перезагрузки страницы

Question

Я пытался отправить информацию в базу данных, используя AJAX, но ничего не работает, каждый раз, когда я нажимаю кнопку отправки, ничего не работает, страницы остаются в некоторой степени c. Все файлы JS имеют правильные ссылки, поэтому я не уверен, что делаю неправильно.

Вот что я сделал до сих пор;

Контроллер:

public function contact_us_ajax() { 
    //form validation rules and file upload config
    $this->form_validation->set_rules('name', 'Name', 'trim|required');
    $this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email');
    $this->form_validation->set_rules('subject', 'Subject', 'trim|required');
    $this->form_validation->set_rules('message', 'Message', 'trim|required');
    $this->form_validation->set_rules('captcha_code', 'Captcha Code', 'trim');
    $this->form_validation->set_rules('c_captcha_code', 'Captcha Code', 'trim|required|matches[captcha_code]',
        array(
            'required' => 'Captcha is required. Reload the page if you cannot see any code.',
            'matches' => 'Invalid captcha code'
        )
    );

    if ($this->form_validation->run()) {
        $this->message_model->contact_us(); //insert the data into database
        $res = ['status' => true, 'msg' => 'Message sent successfully!'];
        echo json_encode($res);
    } else {
        $res = ['status' => false, 'msg' => validation_errors()];
        echo json_encode($res);
    }
}

Модель:

public function contact_us() { 
    $name = ucwords($this->input->post('name', TRUE)); 
    $email = $this->input->post('email', TRUE);
    $subject = ucwords($this->input->post('subject', TRUE)); 
    $message = ucfirst($this->input->post('message', TRUE)); 
    $message = nl2br($message); 
    $data = array (
        'name' => $name,
        'email' => $email,
        'subject' => $subject,
        'message' => $message,
    );
    $this->db->insert('contact_messages', $data);

    //email admins
    //$this->notify_admins($name, $email, $subject, $message);
}

Вид:

        <?php 
              $form_attributes = array("id" => "contact_us_form");
              echo form_open('home/contact_us_ajax', $form_attributes); ?>
     <!-- Contact Form -->
     <div class="col-md-5">


           <h4>Send Us a Message</h4>
           <div class="form-group">

              <label>Name:</label><input type="text" name="name" class="form-control input-field"  required>                    
              <label>Email:</label><input type="email" name="email" class="form-control input-field" required>           
              <label>Subject:</label><input type="text" name="subject" class="form-control input-field" required>                     
           </div>

           <label>Message:</label>
           <textarea name="message" class="textarea-field form-control" rows="4"  required></textarea>

           <div class="col-md-6">
              <input type="text" name="captcha_code" id="captcha_code" value="<?php echo $captcha_code; ?>" class="form-control" readonly />
           </div>
           <div class="col-md-6">
               <input type="text" name="c_captcha_code" value="<?php echo set_value('c_captcha_code'); ?>" class="form-control" placeholder="Enter captcha code here*" required />
           </div>

           <div id="status_msg"></div>

           <?php echo flash_message_success('status_msg'); ?>
           <?php echo flash_message_danger('status_msg_error'); ?>

           <button class="btn center-block">Send message</button>

     </div>


        <?php echo form_close(); ?>   

AJAX:

//Contact Us
$('#contact_us_form').submit(function(e) {
    e.preventDefault();
    var form_data = $(this).serialize();
    $.ajax({
        url: base_url + 'home/contact_us_ajax', 
        type: 'POST',
        data: form_data, 
        dataType: 'json',
        success: function(res) {
            if (res.status) {
                $( '#status_msg' ).html('<div class="alert alert-success text-center" style="color: #000">'+res.msg+'</div>').fadeIn('fast');
                $('#contact_us_form')[0].reset(); //reset form fields
                $('#captcha_code').val(''); //clear captcha field
                setTimeout(function() { 
                    location.reload();
                }, 5000);   
            } else {
                $( '#status_msg' ).html('<div class="alert alert-danger text-center" style="color: #000">' + res.msg + '</div>').fadeIn('fast').delay( 30000 ).fadeOut( 'slow' );   
            }
        }
    });
});

Answer 1

base_url определяется в конфигурации codeigniter. php, например, как:

$config['base_url'] =  'http://or.org/';

НО! Это не означает, что вы можете просто назвать переменную в javascript base_url и надеяться получить какое-либо значение.

Чтобы использовать ее в своем вызове ajax, вам нужно повторить константу php например:

url: '<?php echo base_url()?>' + 'home/contact_us_ajax'

Обычно я просто использую относительный путь

url: '/home/contact_us_ajax'

, который также хорошо работает, если вы используете "обычную" конфигурацию CI