從模態插入數據而不刷新頁面

Question

我想創建一個不會刷新我的頁面的模式，但我不知道如何。有人說我會用ajax，但我很困惑我將如何在代碼中使用ajax。請幫我

VIEW：

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

控制器：

公共職能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() */ 

MODEL：

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

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

Answer 2

在最後一組的形式你正在使用類型的按鈕提交。無論何時按下按鈕，它都會提交所有數據並刷新頁面。所以如果你不想重新加載頁面，你不應該使用提交類型按鈕。而你可以使用帶有Ajax函數調用的普通按鈕。

例如：

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

AJAX例如：

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