codeigniter 如何在CI中使用jquery AJAX 保存多行

wbgh16ku 于 2023-04-27 发布在 jQuery

关注(0)|答案(3)|浏览(110)

在我的html中，行是通过按一个按钮动态添加的。

<button id="add-row">Add New Row</button>

<div class="container">
  <div class="row"><!-- Begins with 1 row -->
    <input type="text" class="text"><input type="number" class="number">
  </div>
  <div class="row"><!-- IF user adds 1 row -->
     <input type="text" class="text"><input type="number" class="number">
  </div>
</div>
<button id="save">Save</button>

在jQuery中

//Add row
$('#add-row').on('click',function(){
      $('.container').prepend('<div class="row">'+
                                '<input type="text" class="text"><input type="number" class="number">'+
                              '</div>');
});
//Save
$('#save').on('click',function(){
  var text = $('.text').val();
  var number = $('.number').val();
  $.ajax({
  type: "POST",
  url: BASE_URL+'save/saverows',
  dataType: 'html',
  data: {text:text,number:number},
  async: false,
  success: function(data){ 
      alert('Rows saved!');
      } 
  }); 
});

在CI控制器中

public function saveRows(){
    $data = array(
        'text' => $this->input->post('text'),
        'number' => $this->input->post('number')
    );

    $this->Row_model->saveAll($data);
}

在CI模型中

public function saveAll($data){
    $this->db->insert('savehere', $data);
  }

数据库表如下所示

ID  TEXT  NUMBER
1   a     11
2   b     22
3   c     33
4   d     44

我有什么只是为了保存一个单一的行只.我怎么能做到这一点，如果有超过1.我有一个想法，使用循环，但我不知道如何实现它在这里.我也读过CI的插入批量，但它有一个固定的行数要保存.
我的问题是在#save onclick中。如何检索所有text和number的值，然后将其传递给jquery ajax，然后传递给codeigniter controller。
使用下面Ilan Hasanov的答案。数组的console.log是：

for (var i = 0; i < arrText.length; i++) {
      console.log(arrText[i]+" "+arrNumber[i]);
}
text 100
text2 55

codeigniter

来源：https://stackoverflow.com/questions/34655886/how-to-save-multiple-rows-using-jquery-ajax-in-ci

3条答案

按热度按时间

fkaflof61#

我已经为你创建了一个函数，它将循环并分配你的输入。

$('#add-row').on('click', function() {
$('.container').prepend('<div class="row">' + '<input type="text" class="text"><input type="number" class="number">' + '</div>');
});

//Save
$('#save').on('click', function() {
var arr = [];
  $(".row").each(function(index) {
  var text   = $(this).find('input[type=text]').eq(index).val();
  var number = $(this).find('input[type=number]').eq(index).val();
   arr.push({
      text: text,
      number: number
   });
});

$.ajax({
      type: "POST",
      url: BASE_URL+'save/saverows',
      data: {batch:arr},
      async: false,
      success: function(data){
          alert('Rows saved!');
      }
  });
});

在你的控制器里你做

public function saveRows(){
$this->db->insert_batch('savehere', $this->input->post('batch'));
}

'savehere' replace to your table name

我们之前在数据库结构中的jQuery中创建了数组，因此必须插入漂亮而简短的代码。
取决于您的数据库结构

arr.push({
   text: text,
   number: number
});

或者如果在数据库中大写

arr.push({
   TEXT: text,
   NUMBER: number
});

赞(0）回复(0）举报 2023-04-27

ybzsozfc2#

取每个输入字段的名称和ID，这些字段应该是唯一的，通过序列化将表单发送到控制器

赞(0）回复(0）举报 2023-04-27

j5fpnvbx3#

在服务器端，我们需要生成像here这样的行数组

//Save
$('#save').on('click',function(){
    var data = [];
    $('.text').each(function(index){
        // text and number are datatypes in database. so i mentioned respected column name
        var row = { "text_col": $(this).val(), "number_col": $('.number')[index].val()   }; 
   data.push(row);
     });

    $.ajax({
          type: "POST",
          url: BASE_URL+'save/saverows',
          dataType: 'json',
          data: data,
          async: false,
          success: function(data){
        if(data == "done"){
        alert('Rows saved!');
        }
    }
  });
});

控制器：

public function saveRows(){
    if ($this->input->is_ajax_request()){
    $data = $this->input->post();
    // I assume row_model already loaded by you.
    $this->Row_model->saveAll($data);
    $this->output->set_output("done");
    }
    $this->output->set_output("failed");
}

内部Row_model

public function saveAll($data){
    $this->db->insert_batch('table_name', $data);
 }

我希望这会有帮助。我还没有测试过代码。所以如果你发现任何问题，请随时编辑。

赞(0）回复(0）举报 2023-04-27

我来回答

codeigniter 如何在CI中使用jquery AJAX 保存多行

3条答案

相关问题

热门标签

最新问答