ajax和php将多个表单输入数据库 - ajax and php to enter multiple forms input to database

我有一个php生成的表单，它有多个输入字段，其数量由用户选择决定。我想使用ajax函数将所有数据输入数据库。问题是我是ajax的新手，不知道该怎么做。下面的ajax javascript函数是我想要实现的一个示例，我知道它是不正确的。有人能给我指正确的方向吗。我环顾四周，从我所看到的，Json可能是一个解决方案，但我对此一无所知，读到这里我仍然不明白

示例ajax：

function MyFunction(){
var i = 1;
var x = $('#num_to_enter').val();
   while (i <= x){
    var name = $('#fname[i]').val();
    var lname = $('#lname[i]').val();
    var email = $('#Email[i]').val();
    i++;
 }
    $('#SuccessDiv').html('Entering Info.<img src="images/processing.gif" />');
     $.ajax({url : 'process.php',
    type:"POST",
   while (i <= x){
    data: "fname[i]=" + name[i] + "&lname[i]=" + lname[i] + "&email[i]=" + email[i],
    i++;
 }
     success : function(data){
    window.setTimeout(function()
    {
    $('#SuccessDiv').html('Info Added!');
    $('#data').css("display","block");
    $('#data').html(data);
    }, 2000);
        }
});
        return false;
          }

形式示例：

<?php
   echo "<form method='post'>";
   $i=1;
    while($i <= $num_to_enter){
    $form_output .= "First Name:
    <input id='fname' type='text' name='fname[$i]'><br />
     Last Name:
    <input id='lname' type='text' name='lname[$i]'><br />
    Email:
    <input id='Email' type='text' name='Email[$i]'><br />
    $i++;
   }
   echo"<input type='button' value='SUBMIT' onClick='MyFunction()'></form>";
   ?>
Then DB MySQL Sample

   <?php
       while ($i <= $x){
    $x = $_POST['num_to_enter'];
    $fname = $_POST['fname[$i]'];
    $fname = $_POST['fname[$i]'];
    $fname = $_POST['email[$i]'];
        $sql = "INSERT INTO `mytable` 
    (`firstname`, `lastname`, `email`) VALUES ('$fname[$i]', '$lname[$i]', '$email[$i]');";
    $i++;
    }
   ?>

这里有一个简单的AJAX演示：

HTML

<form method="POST" action="process.php" id="my_form">
    <input type="text" name="firstname[]">
    <input type="text" name="firstname[]">
    <input type="text" name="firstname[]">
    <input type="text" name="firstname[custom1]">
    <input type="text" name="firstname[custom2]">
    <br><br>
    <input type="submit" value="Submit">
</form>

jQuery

// listen for user to SUBMIT the form
$(document).on('submit', '#my_form', function(e){
    // do not allow native browser submit process to proceed
    e.preventDefault();
    // AJAX yay!
    $.ajax({
        url: $(this).attr('action') // <- find process.php from action attribute
        ,async: true // <- don't hold things up
        ,cache: false // <- don't let cache issues haunt you
        ,type: $(this).attr('method') // <- find POST from method attribute
        ,data: $(this).serialize() // <- create the object to be POSTed to process.php
        ,dataType: 'json' // <- we expect JSON from the PHP file
        ,success: function(data){
            // Server responded with a 200 code
            // data is a JSON object so treat it as such
            // un-comment below for debuggin goodness
            // console.log(data);
            if(data.success == 'yes'){
                alert('yay!');
            }
            else{
                alert('insert failed!');
            }
        }
        ,error: function(){
            // There was an error such as the server returning a 404 or 500
            // or maybe the URL is not reachable
        }
        ,complete: function(){
            // Always perform this action after success() and error()
            // have been called
        }
    });
});

PHP process.PHP

<?php
/**************************************************/
/* Uncommenting in here will break the AJAX call */
/* Don't use AJAX and just submit the form normally to see this in action */
// see all your POST data
// echo '<pre>'.print_r($_POST, true).'</pre>';
// see the first names only
// echo $_POST['firstname'][0];
// echo $_POST['firstname'][1];
// echo $_POST['firstname'][2];
// echo $_POST['firstname']['custom1'];
// echo $_POST['firstname']['custom2'];
/**************************************************/
// some logic for sql insert, you can do this part
if($sql_logic == 'success'){
    // give JSON back to AJAX call
    echo json_encode(array('success'=>'yes'));
}
else{
    // give JSON back to AJAX call
    echo json_encode(array('success'=>'no'));
}
?>

var postdata={};
postdata['num']=x;
   while (i <= x){
    postdata['fname'+i]= name[i];
    postdata['lname'+i]= lname[i];
    postdata['email'+i]= email[i];
    i++;
}
 $.ajax({url : 'process.php',
    type:"POST",
    data:postdata,
    success : function(data){
    window.setTimeout(function()
    {
    $('#SuccessDiv').html('Info Added!');
    $('#data').css("display","block");
    $('#data').html(data);
    }, 2000);
        }
});

PHP

$num=$_POST['num'];
for($i=1;i<=$num;i++)
{
 echo $_POST['fname'.$i];
 echo $_POST['lname'.$i];
 echo $_POST['email'.$i];
}