在codeigniter上使用ajax插入数据

Question

我正在尝试在我的 codeigniter 应用程序中使用 ajax 插入数据，但每次我单击提交按钮时，整个页面都会重新加载并且没有任何反应。实际上，表单提交按钮在我的情况下不起作用。但是当我在没有 ajax 的情况下尝试相同的代码时，它可以通过在表单上使用操作将数据提交到数据库中。

我的看法：

<script type="text/javascript">
  /*submit form via ajax*/
  $("#createGrade").on('click', function (e) {
  e.preventDefault();
  $.ajax({
    url: '<?php echo base_url();?>index.php?admin/exam_grade/create',
    data: {
      grade_title: $("#grade_title").val(),
      grade_point: $("#grade_point").val(),
      mark_from: $("#mark_from").val(),
      mark_upto: $("#mark_upto").val(),
      comment: $("#comment").val()
    },
    async: 'true',
    cache: 'false',
    type: 'post',
    success: function (data) {
      //jQuery("#attendence_report_holder").html(response);
      alert("Data successfully added");
    }
  });
});

</script>

<form method="post" role="form">
  <!-- start form elements -->
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><?php echo get_phrase(' grade_title'); ?></span>
      <input type="text" id="grade_title" name="grade_title"  autocomplete="off" class="form-control" placeholder="A+"  required>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><?php echo get_phrase(' grade_point'); ?></span>
      <input type="number" id="grade_point" name="grade_point"  autocomplete="off" class="form-control" placeholder="5"  required>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><?php echo get_phrase(' mark_from'); ?></span>
      <input type="number" id="mark_form" name="mark_from"  autocomplete="off" class="form-control" placeholder="70"  required>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><?php echo get_phrase(' mark_upto'); ?></span>
      <input type="number" id="mark_upto" name="mark_upto"  autocomplete="off" class="form-control" placeholder="100"  required>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><?php echo get_phrase(' comment'); ?></span>
      <textarea class="form-control" id="comment" rows="3" name="comment" placeholder="add comment"></textarea>
    </div>
  </div>

  <!-- end form elements -->
  <div class="col-xs-6 form-group">
    <button type="submit" class="btn btn-success pull-left" id="createGrade"><?php echo get_phrase('submit');?></button>
  </div>
  <div class="col-xs-6 form-group">
    <button type="reset" class="btn btn-warning pull-right"><?php echo get_phrase('reset');?></button>
  </div>
</form>

这是我的控制器:::

function exam_grade($param1 = '', $param2 = '')
{
    if ($this->session->userdata('admin_login') != 1)
    redirect(base_url(), 'refresh');
    if ($param1 == 'create') {
        $data['name']        = $this->input->post('grade_title');
        $data['grade_point'] = $this->input->post('grade_point');
        $data['mark_from']   = $this->input->post('mark_from');
        $data['mark_upto']   = $this->input->post('mark_upto');
        $data['comment']     = $this->input->post('comment');
        $this->db->insert('grade', $data);
        $this->session->set_flashdata('flash_message' , get_phrase('data_added_successfully'));
    }
}

Answer 1

@raduation 我通过将代码放在我的页面末尾或将 jquery 加载到页面后使其工作。警报消息正在显示..但错误消息被触发。我的帖子数据是否有任何有助于触发错误消息的编码。

<script>
$("#createGrade").on('click', function (e) {
  e.preventDefault();
  $.ajax({
    url: '<?php echo base_url();?>index.php?admin/exam_grade/create',
    data: {
      grade_title: $("#grade_title").val(),
      grade_point: $("#grade_point").val(),
      mark_from: $("#mark_from").val(),
      mark_upto: $("#mark_upto").val(),
      comment: $("#comment").val()
    },
    async: 'true',
    cache: 'false',
    type: 'post',
    success: function (data) {
      //jQuery("#attendence_report_holder").html(response);
      alert("Data successfully added");
    },
    error:function(data){
      alert("error happend");
    }
  });
});
})();  
</script>

Answer 2

从按钮中删除 type="submit"。该属性使按钮提交表单，从而在浏览器中重新加载页面。