我是 Jquery 的新手，我正在开发这个项目 Bootstrap html framewok 和 CodeIgniter，但一直以来我发现每当我想使用 Jquery 处理表单时，我都会点击发送/保存/登录/注册（任何）按钮将表单数据发送到处理控制器方法，我的表单页面不断重新加载，
我实际上不知道它是否是我放置 Jquery 和 Javascript 源文件的地方，这使得它以这种方式运行。
例如，这是一个正在尝试验证和处理的联系表单，我希望它以某种方式，如果我单击发送按钮，页面保持静态，并且表单在后端处理。
我的代码在这里
public function contact()
{
$this->form_validation->set_rules('text', 'Message', 'trim|required|min_length[5]');
$this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email');
/**set error msg*/
//$this->form_validation->set_message('required', 'Your Username Must Not Be Empty');
$this->form_validation->set_message('min_length[5]', 'Your Message is too short!');
$this->form_validation->set_message('valid_email', 'Please Enter A Valid E-mail Address');
if ($this->form_validation->run() == TRUE )
{
//the json and model for saving the feedback into db will bw placed here that will
}
$data['title'] = ucfirst('Contact Us');
$data['currentpage'] = 'contact';
$this->load->view('../templates/header', $data);
$this->load->view('contact', $data);
$this->load->view('../templates/footer', $data);
}
头文件.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
<!-- Le styles --><?php
$link = array(
'href' => base_url().'css/bootstrap.css',
'rel' => 'stylesheet'
);
echo link_tag($link);
$link2 = array(
'href' => base_url().'css/main.css',
'rel' => 'stylesheet',
'type' => 'text/css'
);
echo link_tag($link2);
$link3 = array(
'href' => base_url().'css/bootstrap-responsive.css',
'rel' => 'stylesheet',
);
echo link_tag($link3);
<script src="<?php echo base_url(); ?>js/jquery.js"></script>
<script >
$('#send').click(function(){
$.ajax({
url: '<?php echo site_url('contact');?>',
type:'POST',
dataType: 'json',
success: function(output_string){
$('#alert_div').append(output_string);
} // End of success function of ajax form
}); // End of ajax call
});
</script>
</head>
<body>
有趣的是，其他 javascript 脚本文件包含在页脚中。
<!-- Footer -->
<footer>
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="<?php echo base_url(); ?>js/jquery.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-transition.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-alert.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-modal.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-dropdown.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-scrollspy.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-tab.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-tooltip.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-popover.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-button.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-collapse.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-carousel.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-typeahead.js"></script>
<script src="<?php echo base_url(); ?>js/prettify.js"></script>
<!-- Validate plugin -->
<script src="<?php echo base_url(); ?>js/jquery.validate.min.js"></script>
</body>
</html>
编辑 添加contact.php视图页面
<div class="container-fluid">
<div class="row-fluid space">
<div class="span2">
</div><!--/span-->
<div class="span8">
<div class="top-page-ads">
Our Feedback Form
</div><!--/hero-unit-->
<div class="file-div">
<div class="row-fluid">
<div class="span8" style="margin-left:10px;">
<div id="alert-div"></div>
<form method="POST" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="input1">Name</label>
<div class="controls">
<input type="text" name="contact_name" id="input1" placeholder="Your name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="input2">Email Address</label>
<div class="controls">
<input type="text" name="contact_email" id="input2" placeholder="Your email address">
</div>
</div>
<div class="control-group">
<label class="control-label" for="input2">Message Subject</label>
<div class="controls">
<input type="text" name="contact_subject" id="input3" placeholder="Your Message Subject">
</div>
</div>
<div class="control-group">
<label class="control-label" for="input3">Message</label>
<div class="controls">
<textarea name="contact_message" id="input3" rows="5" class="span8" placeholder="The message you want to send to us."></textarea>
</div>
</div>
<div class="form-actions">
<input type="hidden" name="save" value="contact">
<button type="submit" id="send" name="send" class="btn btn-primary">Send</button>
<button type="reset" class="btn">Clear</button>
</div>
</form>
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/file-div-->
</div><!--span-->
</div>
编辑结束
我希望表单是异步发布的，但是当我单击“发送”按钮时，页面会不断重新加载，
任何想法？