从模式插入数据而不刷新页面 - Insert data from modal without refreshing the page

我想创建一个不会刷新我的页面的模态，但我不知道怎么做。有人说我会使用 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>

控制器：

公共函数上传成分（） {

    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;
    }

在最后一个表单组中，您使用的是"提交"类型的按钮。每当您点击该按钮时，它都会提交所有数据并刷新页面。因此，如果您不想重新加载页面，则不应使用提交类型按钮。相反，您可以将普通按钮与 Ajax 函数调用一起使用。

例：

<button class="btn btn-lg btn-positive" type="button" onclick="return ajaxFunction();"><i class="glyphicon glyphicon-ok"></i> Save Recipe</button>

阿贾克斯示例：

ajaxFunction(){
    $.ajax({
        url: //a php file's location that will receive and process all the data
        type: 'POST',
        data: //json or javascript object, for example, var1:'value1', in the php file you will get the value of var1 by using $_POST['var1'], if you use multiple variable as data then use a curly bracket with them, for example, {var1:'value1',var2:'value2'}
        success: function(response){
            //the response variable will hold anything that is written in that php file(in html) and anything you echo in that file
        }
     });return false;
}

使用 ajax

这是一种更好的方式

$.ajax({
    url: "localhost/codeigniter-project/index.php/controller",
    type: "POST", // you can use GET
    data: {name: 'John'}, // post data
    success: function(data){
        console.log(data); // after success
    }
});