Question

我是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);
}

的header.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>

编辑结束

我希望表单以异步方式发布，但是当我点击“发送”按钮时页面会不断重新加载，

任何想法？

Answer 1

您必须取消链接上的默认操作，以便

$('#send').click(function () {});

应该是

$('#send').click(function (event) {
  event.preventDefault();
}

试试这个

Answer 2

确保按钮单击事件处理程序返回false。

Answer 3

听起来你并没有阻止点击的默认行为。

替换：

$('#send').click(function(){

使用：

$('#send').click(function (e) {
    e.preventDefault();

如果e.preventDefault();无效，请尝试添加e.stopPropagation();或e.stopImmediatePropagation();。

Answer 4

有助于查看页面正文，是用于提交表单的按钮，如下所示：<input type="submit" class="send" value="Submit">如果是，则Web浏览器会自动将表单值POST回服务器。

方法1：
避免这种情况的一种方法是使用像<button type="button" class="send">Submit</button>

这样的按钮

方法2：
如果您不太喜欢第一种方法，则需要使用javascript来防止导致浏览器回传表单值的均匀传播。该主题可能有用：How to stop event propagation with inline onclick attribute?

以下是删除表单标记的第三种方法的工作示例。 http://jsfiddle.net/KJt3C/1/

按下发送按钮时联系页面重新加载，即使我想用Jquery发送它

4 个答案: