ajax和php输入多个表单输入到数据库

Question

ajax和php输入多个表单输入到数据库

我有一个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++;

    }

   ?>

Answer 1

这是一个简单的AJAX演示：HTML<form method="POST" action="process.php" id="my_form">&nbsp; &nbsp; <input type="text" name="firstname[]">&nbsp; &nbsp; <input type="text" name="firstname[]">&nbsp; &nbsp; <input type="text" name="firstname[]">&nbsp; &nbsp; <input type="text" name="firstname[custom1]">&nbsp; &nbsp; <input type="text" name="firstname[custom2]">&nbsp; &nbsp; <br><br>&nbsp; &nbsp; <input type="submit" value="Submit"></form>jQuery的// listen for user to SUBMIT the form$(document).on('submit', '#my_form', function(e){&nbsp; &nbsp; // do not allow native browser submit process to proceed&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; // AJAX yay!&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; url: $(this).attr('action') // <- find process.php from action attribute&nbsp; &nbsp; &nbsp; &nbsp; ,async: true // <- don't hold things up&nbsp; &nbsp; &nbsp; &nbsp; ,cache: false // <- don't let cache issues haunt you&nbsp; &nbsp; &nbsp; &nbsp; ,type: $(this).attr('method') // <- find POST from method attribute&nbsp; &nbsp; &nbsp; &nbsp; ,data: $(this).serialize() // <- create the object to be POSTed to process.php&nbsp; &nbsp; &nbsp; &nbsp; ,dataType: 'json' // <- we expect JSON from the PHP file&nbsp; &nbsp; &nbsp; &nbsp; ,success: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Server responded with a 200 code&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // data is a JSON object so treat it as such&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // un-comment below for debuggin goodness&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // console.log(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(data.success == 'yes'){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('yay!');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('insert failed!');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ,error: function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // There was an error such as the server returning a 404 or 500&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // or maybe the URL is not reachable&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ,complete: function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Always perform this action after success() and error()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // have been called&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});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 partif($sql_logic == 'success'){&nbsp; &nbsp; // give JSON back to AJAX call&nbsp; &nbsp; echo json_encode(array('success'=>'yes'));}else{&nbsp; &nbsp; // give JSON back to AJAX call&nbsp; &nbsp; echo json_encode(array('success'=>'no'));}?>

Answer 2

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