如何在不重新加载页面的情况下将信息发送到数据库

Question

我一直在尝试使用 AJAX 将信息发送到数据库，但没有任何效果，每次我单击提交按钮时，没有任何效果，页面在某种程度上保持静态。所有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(); ?>   

阿贾克斯：

//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的config.php中定义，例如：

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

但！这并不意味着你可以简单地在javascriptbase_url中命名一个变量，并希望得到任何值。

要在 ajax 调用中使用它，您需要回显 php 常量，如下所示：

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

我通常只使用相对路径

url: '/home/contact_us_ajax'

如果您使用"常规"CI 配置，这也工作正常