php - 通过ajax在代码点火器中提交表单

Question

我想通过 ajax 提交表单，但我不知道为什么表单不通过 ajax 提交。为什么 ajax 不选择提交 id..这段代码只是像往常一样提交而不是通过 ajax 帮助我哪里错了..

 echo form_open('Contact_Controller/submit');
 echo form_input('name', set_value('name'), 'id="name"');
 echo form_input('email', set_value('email'), 'id="email"');
 $data = array(
        'name'=> 'message',
        'id' => 'message',
        'cols'=> '35',
        'rows' => '12'

        );
 echo form_textarea($data, 'Message');
 echo form_submit('submit', 'Submit', 'id="submit"');
 ?>

<script type = "text/javascript">
$('#submit').click(function(){

var form_data = {
        name: $('#name').val(),
        email: $('#email').val(),
        message: $('#message').val()
};

$.ajax({
    url: "<?php echo site_url('tuts_Contact_Controller/submit'); ?>",
    type: 'POST',
    data: form_data,
    success: function(msg) {
      alert(msg);
    }

});

</script>

Answer 1

使用这种方式：

我猜你在这个脚本上面有 jquery。

<script type = "text/javascript">
$(function(){       // <----------------missed the doc ready function
  $('form').submit(function(e){
    e.preventDefault(); // <------this will restrict the page refresh
    var form_data = {
        name: $('#name').val(),
        email: $('#email').val(),
        message: $('#message').val()
    };

    $.ajax({
        url: "<?php echo site_url('tuts_Contact_Controller/submit'); ?>",
        type: 'POST',
        data: form_data, // $(this).serialize(); you can use this too
        success: function(msg) {
              alert(msg);
        }

   });
 });
});
</script>

Answer 2

您应该防止表单提交的默认事件，例如：

$('#submit').click(function(evt){
  evt.preventDefault();
  ....