CODEIGNITER：模态表单在不加载页面的情况下插入数据

Question

我想创建一个Bootstrap模式，在该模式下，用户无需使用页面刷新即可填充借助jQuery AJAX插入数据库中的数据，但是我不知道该怎么做。

有人说我将使用ajax，但是我对如何在代码中使用ajax感到困惑。 我对ajax一无所知，所以请帮助我

视图：

  <div clas="container-fluid">
      <div class="form-group">
    <div class="col-sm-10">
      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Add Ingredients</h4>
            </div>
            <div class="modal-body">
              <div clas="container-fluid">
      <?php echo form_open('dashboard/uploadIngredients', 'class="form-horizontal" enctype="multipart/form-data"'); ?>
    <div class="form-group">
      <div class="col-sm-10">

        <select required class="form-control" name="ingredient_category">

          <option value="" selected disabled>Select Ingredient Category</option>
      <option value="All">All</option>
      <?php foreach($this->products_model->getCategory() as $row): ?>
        <option value="<?php echo $row->category_id ?>"><?php echo $row->category_name; ?></option>
      <?php endforeach; ?>
        </select>

      </div>
    </div>
  <div class="form-group">
      <div class="col-sm-10">
        <textarea class="form-control" name="ingredients" rows="5" placeholder="Ingredients (EX. onion, oil, pasta)" required></textarea> 
      </div>
    </div>

    <div class='form-group'>
      <div class="col-sm-10">
        <button class="btn btn-lg btn-positive" type="submit"><i class="glyphicon glyphicon-ok"></i> Save Ingredient</button>
      </div>
    </div>
  <?php echo form_close(); ?></div></div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div> </div> </div></div> </div>
    </div>

   </div>

控制器：

    public function uploadIngredients()
{

    foreach(explode(',', $this->input->post('ingredients')) as $key => $value)
        {
            if (!$this->products_model->getIngredientByName($value)) {
                $saveData[] = array(
                    'ingredient_id' => null,
                    'name'  => trim($value)
                );  
            }
        }

    $ingredient_id = $this->products_model->saveIngredients($saveData); 
    foreach (explode(',', $this->input->post('ingredient_category')) as $key => $value)
    {
     foreach ( $ingredient_id as $key => $str ){
        $joinData[] = array(
                            'ingredient_id'     => $str,
                            'category_id'       => intval($value)
        );
}
        //var_dump($joinData); die();
        $this->products_model->saveCategoryIngredients($joinData);

        redirect('dashboard/add_product');
        }


}/* end of uploadIngredients() */

模型：

public function saveIngredients($ingredient_id)
    {
        foreach($ingredient_id as $row => $value) {
            $query=$this->db->where('ingredient_id', $value->ingredient_id);
                $this->db->insert('ingredient', $value);
                $insert_id[] = $this->db->insert_id();  
        }
        return $insert_id;
    }

Answer 1

您的查看代码

<div clas="container-fluid">
  <div class="form-group">
<div class="col-sm-10">
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add Ingredients</h4>
        </div>
        <div class="modal-body">
          <div clas="container-fluid">
  <?php echo form_open('', 'class="form-horizontal" enctype="multipart/form-data"'); ?>
<div class="form-group">
  <div class="col-sm-10">
<select required class="form-control" name="ingredient_category">
    <option value="" selected disabled>Select Ingredient Category</option>
  <option value="All">All</option>
  <?php foreach($this->products_model->getCategory() as $row): ?>
    <option value="<?php echo $row->category_id ?>"><?php echo $row->category_name; ?></option>
  <?php endforeach; ?>
    </select>
</div>
</div>


<div class="form-group">
  <div class="col-sm-10">
    <textarea class="form-control" name="ingredients" rows="5" placeholder="Ingredients (EX. onion, oil, pasta)" required></textarea> 
  </div>
</div>
<div class='form-group'>
  <div class="col-sm-10">
    <button class="btn btn-lg btn-positive" id="submit" type="submit"><i class="glyphicon glyphicon-ok"></i> Save Ingredient</button>
  </div>
</div>


<?php echo form_close(); ?></div></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div> </div> </div></div> </div>
</div>
</div>

您控制代码

       public function uploadIngredients()
{

foreach(explode(',', $this->input->post('ingredients')) as $key => $value)
    {
        if (!$this->products_model->getIngredientByName($value)) {
            $saveData[] = array(
                'ingredient_id' => null,
                'name'  => trim($value)
            );  
        }
    }

$ingredient_id = $this->products_model->saveIngredients($saveData); 
foreach (explode(',', $this->input->post('ingredient_category')) as $key => $value)
{
 foreach ( $ingredient_id as $key => $str ){
    $joinData[] = array(
                        'ingredient_id'     => $str,
                        'category_id'       => intval($value)
    );
}
    //var_dump($joinData); die();
    $this->products_model->saveCategoryIngredients($joinData);


    }


}/* end of uploadIngredients() */

并在head标签处添加jQuery库文件

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

和页脚上的Ajax脚本

<script>
jQuery('#submit').on('submit',function(e){
         e.preventDefault();
       jQuery.ajax({
            type: "POST",
            url: '<?php echo base_url();?>dashboard/uploadIngredients',
            data: new FormData(this),
            contentType: false,       
            cache: false,             
            processData:false,    
            success: function(html){
               try{ 
                   alert("success");
                 }catch (e){
                  alert(JSON.stringify(e));
                 }



            },
                 error : function(e){alert("error "+JSON.stringify(e)); }
        });


});
</script>

Answer 2

将按钮type="submit"更改为type="button" 。

然后使用

jQuery("#submit").click(function(){

---------------code-------