Вставьте данные из модального без обновления страницы

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> 

CONTROLLER:

общественная функция 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

Использование 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> 

Аякса пример:

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