将多个数组的ajax数据发布到php

Question

I've successfully posted a single serialized array, but I can't figure out how to post more than one array in an AJAX post. Here is my code:

HTML

<td><input type="text" name='item_name[]' id="item_name" class="form-control" autocomplete="off"></td>
<td><input type="number" name='quantity[]' id="quantity" class="form-control" autocomplete="off"></td>

jquery

$("#create_order").click(function(){  

    var item_name = $('[name="item_name[]"]').serialize();
    var quantity = $('[name="quantity[]"]').serialize();

    $.ajax({

        url: "includes/ajax_new_order.php",
        data: {item_name:item_name, quantity:quantity},

        type: "POST",

        success:function(data){ 

            $("#editModal").modal('hide'); 

            $('#create_order').html('<span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Save');
        }
    });
});

PHP

<?php require("../init.php");

    $item_name = $_POST['item_name'];
    $quantity = $_POST['quantity'];

    foreach (array_combine($item_name, $quantity) as $key1 => $key2) {

      $query = $database->query("INSERT INTO order_tb(item,quantity) VALUES('$key1','$key2') ");
      if ($query) {
        echo "<p>Success</p>";
      }
      else { 
        echo "<p>Failed</p>"; 
      } 
    }
?>

One array works fine, however when I try to add a second array quantity to the data: field, it doesn't work.

Answer 1

You can use map function instead of serialize function. Here is a sample code. Just replaced your jquery code by this bellow sample code.

$("#create_order").click(function(){  

    //var item_name = $('[name="item_name[]"]').serialize();
    //var quantity = $('[name="quantity[]"]').serialize();

    var item_name =$('[name="item_name[]"]').map(function(){return $(this).val();}).get();
    var quantity = $('[name="quantity[]"]').map(function(){return $(this).val();}).get();


    $.ajax({

        url: "includes/ajax_new_order.php",
        data: {item_name:item_name, quantity:quantity},

        type: "POST",

        success:function(data){ 

            $("#editModal").modal('hide'); 

            $('#create_order').html('<span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Save');
        }
    });
});