使用ajax将多个表单中的数据发送到同一个控制器

时间:2017-03-29 10:39:58

标签: jquery ajax codeigniter-3

我有一个将所选值发送到控制器的选择表单,以及一个将两个值发送到同一个控制器的表单模式,所有这两个将使用jquery函数发送它们的数据! 这是我的代码:

HTML:
<!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>



    <div class="form-group">
                         <h3>Veuillez choisir un cycle :</h3><br/>

                          <label>Cycle: </label>

                          <form method="post" accept-charset="utf-8">

                         <select name="cyc" id ="Select1" class="input-small">

                            <?php foreach($cycle as $row) {?>

                                 <option value="<?php echo $row->id; ?>"><?php echo $row->libelle; ?></option>

                            <?php }?>
                        </select>

                          </form>

                          <button class="btn btn-success" onclick="display()"><i class="glyphicon glyphicon-plus"></i> display</button>
                        </div>





      <div id="x" style="display:none;" class="container">

    </center>


        <button class="btn btn-success" onclick="add_filiere()"><i class="glyphicon glyphicon-plus"></i> Ajouter une filiere</button>
        <br />
        <br />

        <table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
          <thead>
            <tr>
                     <th>Identifiant</th>
              <th>Identifiant du cycle</th>
              <th>Libellé</th>

              <th>Action</th>
            </tr>
          </thead>
          <tbody>
                    <?php foreach($filiere as $row){?>
                         <tr>
                             <td><?php echo $row->id;?></td>
                      <td><?php echo $row->id_cycle;?></td>
                             <td><?php echo $row->libelle;?></td>

                                    <td>
                                        <button class="btn btn-warning" onclick="edit_filiere(<?php echo $row->id;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
                                        <button class="btn btn-danger" onclick="delete_filiere(<?php echo $row->id;?>)"><i class="glyphicon glyphicon-remove"></i></button>


                                    </td>
                          </tr>
                         <?php }?>



          </tbody>


        </table>

      </div>



      <script src="<?php echo base_url('assests/datatables/js/jquery.dataTables.min.js')?>"></script>
      <script src="<?php echo base_url('assests/datatables/js/dataTables.bootstrap.js')?>"></script>


      <script type="text/javascript">
      $(document).ready( function () {
          $('#table_id').DataTable( {
            "lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]]
        });
      } );
        var save_method; //for save method string
        var table;


        function add_filiere()
        {
          save_method = 'add';
          $('#form')[0].reset(); // reset form on modals
          $('#modal_form').modal('show'); // show bootstrap modal
        //$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
        }

        function display()
        {
       /*  var ic = document.getElementById('cyc').value;
         document.getElementById('x').style.display = 'block';

         $.ajax({
           url : "<?php echo site_url('index.php/filiere/test') ?>",
           type :"POST",
            data :{ic: ic},
            success: function(data)
            {

            },
            error : function(jqXHR, textStatus, errorThrown)
            {
              alert('cannot reach controller');
            }


         });*/
        }

        function edit_filiere(id)
        {
          save_method = 'update';
          $('#form')[0].reset(); // reset form on modals

          //Ajax Load data from ajax
          $.ajax({
            url : "<?php echo site_url('index.php/filiere/filiere_edit/')?>/" + id,
            type: "GET",
            dataType: "JSON",
            success: function(data)
            {

                $('[name="i"]').val(data.id);
                $('[name="l"]').val(data.libelle);



                $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
                $('.modal-title').text('Modifier département'); // Set title to Bootstrap modal title

            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Error get data from ajax');
            }
        });
        }



        function save()
        {
          var url;
          if(save_method == 'add')
          {
              url = "<?php echo base_url('index.php/filiere/filiere_add')?>";
          }
          else
          {
            url = "<?php echo base_url('index.php/filiere/filiere_update')?>";
          }

           // ajax adding data to database
              $.ajax({
                url : url,
                type: "POST",
                data: $('#form').serialize(),
                dataType: "JSON",
                success: function(data)
                {
                   //if success close modal and reload ajax table
                   $('#modal_form').modal('hide');
                  location.reload();// for reload a page
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error adding / update data');
                }
            });
        }


        function delete_filiere(id)
        {
          if(confirm('Voulez vous supprimer ce filiere ?'))
          {
            // ajax delete data from database
              $.ajax({
                url : "<?php echo site_url('index.php/filiere/filiere_delete')?>/"+id,
                type: "POST",
                dataType: "JSON",
                success: function(data)
                {

                   location.reload();
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error deleting data');
                }
            });

          }
        }

      </script>

      <!-- Bootstrap modal -->
      <div class="modal fade" id="modal_form" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title">Départements</h3>
          </div>
          <div class="modal-body form">
            <form action="#" id="form" class="form-horizontal">

              <div class="form-body">
                <div class="form-group">
                  <label class="control-label col-md-3">Identifiant</label>
                  <div class="col-md-9">
                    <input name="i" placeholder="Identifiant" class="form-control" type="text">
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-md-3">Libelle</label>
                  <div class="col-md-9">
                    <input name="l" placeholder="Nom" class="form-control" type="text">
                  </div>
                </div>




              </div>
            </form>
              </div>
              <div class="modal-footer">
                <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
      <!-- End Bootstrap modal -->

      </body>
    </html>

我的控制器:

<?php
            defined('BASEPATH') OR exit('No direct script access allowed');

            class Filiere extends CI_Controller {

                /**
                 * Index Page for this controller.
                 *
                 * Maps to the following URL
                 *      http://example.com/index.php/welcome
                 *  - or -
                 *      http://example.com/index.php/welcome/index
                 *  - or -
                 * Since this controller is set as the default controller in
                 * config/routes.php, it's displayed at http://example.com/
                 *
                 * So any other public methods not prefixed with an underscore will
                 * map to /index.php/welcome/<method_name>
                 * @see https://codeigniter.com/user_guide/general/urls.html
                 */

                 public function __construct()
                    {
                        parent::__construct();
                        $this->load->helper('url');
                        $this->load->model('filiere_model');
                        $this->load->model('cycle_model');

                    }


                public function index()
                {
                    $this->data["cycle"] = $this->cycle_model->get_all_cycle();
                   $id_cycle = "";
                    $this->data['filiere'] = $this->filiere_model->get_all_filiere($id_cycle);
                    $this->data["title"] = "Gérer les filieres";
                    $this->data["page"] = $this->load->view('filiere_view',$this->data,true);
                    $this->load->view("default",$this->data);               
                }
            public function test()
             {
                  $id_cycle = $_POST['ic'];
                  $this->data['x']= $id_cycle;
                  $this->data["page"] = $this->load->view('test_view',$this->data,true);
                  $this->load->view("default",$this->data);
            }
                public function filiere_add()
                    {
                        $data = array(
                                'id' => $this->input->post('i'),
                                 'id_cycle' => $this->input->post('cyc'),
                                  'libelle' => $this->input->post('l'),

                            );
                        $insert = $this->filiere_model->filiere_add($data);
                        echo json_encode(array("status" => TRUE));
                    }
                    public function filiere_edit($id)
                    {
                        $data = $this->filiere_model->get_by_id($id);



                        echo json_encode($data);
                    }

                    public function filiere_update()
                {
                    $data = array(
                                'id' => $this->input->post('i'),
                                'libelle' => $this->input->post('l')

                            );
                    $this->filiere_model->filiere_update(array('id' => $this->input->post('i')), $data);
                    echo json_encode(array("status" => TRUE));
                }

                public function filiere_delete($id)
                {
                    $this->filiere_model->delete_by_id($id);
                    echo json_encode(array("status" => TRUE));
                }


            }

请帮忙!

1 个答案:

答案 0 :(得分:1)

控制器:

 $this->input->post('name');
 $this->input->post('location');

的Ajax:

$.ajax({
  method: "POST",
  url: "your/controller",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });