У меня есть сгенерированная php форма с несколькими полями ввода, число которых определяется выбором пользователя. Я хотел бы использовать функцию ajax для ввода всех данных в базу данных. Проблема в том, что я новичок в ajax и не уверен, что это нужно. Ниже приведена функция javascript ajax – образец того, что я хотел бы достичь, и я знаю, что это неверно. Может кто-то указать мне в правильном направлении. Я огляделся и увидел, что Джон может быть решением, но я ничего не знаю об этом и не читаю, я до сих пор этого не понимаю.
образец 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]; }