如何将每个输入值与特定的id一起发送到ajax函数？

Question

我有一个问题，我对此非常困惑。我不知道如何发送特定的输入 id，以便我可以将其发送到 ajax，然后保存到数据库。我想将所有数据发送到 ajax，并且在我的表中输入字段是动态生成的。我们来看看下面的图片。

我的 jquery 函数：

function addnewrow() {
    var n = ($('.detail tr').length - 0) + 1;

    var tr = '<tr>' +
        '<td class="no">' + n + '</td>' +
        '<td><input type="checkbox" class="till_check" name="till_check[' + till_check_counter + ']" id="till_check[' + till_check_counter + ']"></td>' +
        '<td><select class="form-control barcode selectpicker  dyselect_' + product_barcode_counter + '" data-live-search="true" name="barcode[' + product_barcode_counter + ']" id="barcode[' + product_barcode_counter + ']">' + '<option>Please select a bar code</option>' + '</select></td>' +
        '<td><input type="text" class="form-control prdctn_' + product_name_counter + ' productname"  id="brcode_product['+product_name_counter+']"  name="productname[' + product_name_counter + ']" id="productname[' + product_name_counter + ']"></td>' +
        '<td><select class="form-control selectpicker dysm_' + sm_counter + ' sm " data-live-search="true" name="sm[' + sm_counter + ']" id="sm[' + sm_counter + ']">' + '<option>Please select a Employee code</option>' + '</select></td>' +
        '<td><input type="text" class="form-control spl" name="spl[' + spl_counter + ']" id="spl[' + spl_counter + ']"></td>' +
        '<td><input type="text" class="form-control quantity" name="quantity[' + product_quantity_counter + ']" id="quantity[' + product_quantity_counter + ']"></td>' +
        '<td><input type="text" class="form-control price" name="price[' + product_price_counter + ']" id="price[' + product_price_counter + ']"></td>' +
        '<td><input type="text" class="form-control discount" name="discount[' + product_discount_counter + ']" id="discount[' + product_discount_counter + ']"></td>' +
        '<td><input type="text" class="form-control amount" name="amount[' + product_amount_counter + ']" id="amount[' + product_amount_counter + ']"></td>' +
        '<td><a href="#" class="remove">Delete</td>' +
        '</tr>';
    $('.detail').append(tr);
    
    
  
        var barcode = $('#barcode[' + product_barcode_counter + '] option:selected').val();
        var productname = $('#brcode_product[' + product_name_counter + ']').val();
        var quantity = $('#barcode[' + product_quantity_counter + ']').val();
        var sm = $('#sm[' + sm_counter + ']').val();
        var spl = $('#spl[' + spl_counter + ']').val();
        var price = $('#price[' + product_price_counter + ']').val();
        var discount = $('#discount[' + product_discount_counter + ']').val();
        var amount = $('#amount[' + product_amount_counter + ']').val();

        $('#save_btn').on('click', function (id) {

            $.ajax({
                url: "http://localhost/retail/main/store",
                type: "POST",
                data: {
                    barcode: barcode,
                    productname: productname,
                    sm: sm,
                    spl: spl,
                    quantity: quantity,
                    price: price,
                    discount: discount,
                    amount: amount
                },
                success: function (res) {
                    alert(res);
                }

            });

        })

    // incrementing the counter
    ++product_barcode_counter;
    ++till_check_counter;
    ++product_name_counter;
    ++product_quantity_counter;
    ++sm_counter;
    ++spl_counter;
    ++product_price_counter;
    ++product_discount_counter;
    ++product_amount_counter;

    //setting the validation rules for every product attribute by calling the function 
    createValidation();
    get_barcodes();
    get_employee_codes();
  
    //Send ajax request to the function on pressing the save button
}

我的控制器：

public function store() {
            /* echo ($_POST['barcode']);
             echo "<br/>";
             echo ($_POST['productname']);
             echo "<br/>";
             echo ($_POST['smsm']);
             echo "<br/>";
             echo ($_POST['spl']);
             echo "<br/>";
             echo ($_POST['quantity']);
             echo "<br/>";
             echo ($_POST['price']);
             echo "<br/>";
             echo ($_POST['discount']);
             echo "<br/>";
             echo ($_POST['amount']);
             echo "<br/>";*/
        
        //echo $this->input->post('barcode');
          
    if ($this->session->userdata('status')== 1) {
         for ($i = 0; $i < count($this->input->post['productname']); $i++) {

         $order_id = $this->session->userdata('id');
         $product_name = $this->input->post('productname')[$i];
         $barcode = $this->input->post('barcode')[$i];
         $spl= $this->input->post('spl')[$i];
         $sm= $this->input->post('sm')[$i];
         $quantity = $this->input->post('quantity')[$i];
         $price = $this->input->post('price')[$i];
         $discount =$this->input->post('discount')[$i];
         $amount = $this->input->post('amount')[$i];

        $data = array(
        
             'order_id'=> $order_id,
             'product_name'=>$product_name,
             'barcode'=> $barcode,
             'sm'=> $sm,
             'spl'=> $spl,
             'quantity'=>$quantity,
             'price'=>$price,
             'discount'=> $discount,
             'amount'=> $amount,
        );     
             
             $this->Sale_model->insert_sales_data($data);
             echo "Data inserted successfully!";    
         }
      }
      else 
      {
          redirect('login');
      }
    }

当您单击蓝色按钮时，首先在下面添加同一行，所以我只想问如何将每行的值发送到ajax函数，以便我可以在单击时相应地将记录保存在数据库中在保存按钮（绿色）上。我不明白如何使用 jquery 和 php 在 ajax 函数的帮助下实现这一点。！

Answer 1

使用以下代码来实现您的目的

<form role="form" name="form_name" method="post" action="javascript:;">
  <!--Form Elements-->
</form>

使用FormData对象来传递AJAX请求

var data = new FormData($('form')[0]);
$.post({
        method: "POST",
        url: "http://localhost/retail/main/store",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
}).done(function( response ) {

}).error(function(response){

});