在成功部分的Ajax发布方法中,发布数据的顺序和获取数据的顺序是不同的


In Ajax post method in success part the posting sequence of data and get sequence of data is diff

在我给定的代码中,我用diff-ids动态创建了textbox,在javascript中,我一个接一个地获取textbox的值,直到这里所有的东西都很完美,但当我将这些数据从ajax post方法传递到其他文件时,获取的数据序列将改变


<html>
<head>
<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
<script>
$(document).ready(function(){
 var i = $('input').size() + 1;
 $('#add').click(function() {
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
    $('<div id="d"><input type="text" id="field'+value+'" name="dynamic[]" value="' + i + '" /><br/><input type="text" class="field1" name="dynamic1[]" value="' + i+i + '" /></div> ').fadeIn('slow').appendTo('.inputs'); 
    i++;
});
$('#remove').click(function() {
if(i > 1) {
    $('.field:last').remove();
    $('.field1:last').remove();
    i--; 
}
});
$('#reset').click(function() {
while(i > 2) {
    $('.field:last').remove();
    $('.field1:last').remove();
    i--;
}
}); 
$('.submit').click(function(){                              
var number = document.getElementById("number").value; 
for(var i=1;i<=number;i++)
{        
        answers = $('#field'+i).val(); 
        alert(answers);
        $.ajax({     
                   type: "POST",
                   url: " dd.php",
                   data: {answers:answers},
                   cache: false,
                   success: function(html)
                   {                                 
                           alert(html);                              
                   }
                })
  }
   return false;                        
   });
});
</script>
<style>
.field{
    padding:0 0 0 0;
    margin: 0 5px 24px 78px;
}
.field1{
  padding:0 0 0 0;
    margin: 0 5px 24px 78px;
}
#d{
  display:flex;
}
.submit{
width:110px;
background-color:#FF6;
padding:3px;
border:1px solid #FC0;
margin-top:20px;}   
</style>
<body>
    <div>
     <a href="#" id="add">Add</a> | <a href="#" id="remove">Remove</a>  | <a href="#" id="reset">Reset</a>  
 <form>
    <input type="hidden" id="number" value="0"/>  
    <div class="inputs">    
    </div>
    <input name="submit" type="button" class="submit" value="Submit">
 </form>
 </div> 
 </body>
 </html>

上面的代码不起作用。您在第一个输入字段中错过了类,您保留了id而不是类名。

    $(document).ready(function(){
    var i = $('input').size() + 1;
    $('#add').click(function()
    {
        $('<div class="d"><input type="text" class="field" name="dynamic[]" value="' + i + '" /><br/><input type="text" class="field1" name="dynamic1[]" value="' + i+i + '" /></div> ').fadeIn('slow').appendTo('.inputs'); 
        i++;
    });
    $('#remove').click(function() {
    if(i > 1) {
        $('.field:last').remove();
        $('.field1:last').remove();
        i--; 
    }
    });
    $('#reset').click(function() {
    while(i > 2) {
        $('.field:last').remove();
        $('.field1:last').remove();
        i--;
    }
    }); 
    });
    </script>
    <style>
    .field{
    padding:0 0 0 0;
        margin: 0 5px 24px 78px;
    }
    .field1{
    padding:0 0 0 0;
        margin: 0 5px 24px 78px;
     }
    .d{
      display:flex;
    }
    .submit{
    width:110px;
    background-color:#FF6;
    padding:3px;
    border:1px solid #FC0;
    margin-top:20px;
    }   
    </style>
    <body>
    <div>
        <a href="#" id="add">Add</a> | <a href="#" id="remove">Remove</a>  | <a href="#" id="reset">Reset</a>  
    <form method="post" action="dd.php">
        <div class="inputs">    
        </div>
        <input name="submit" type="submit" class="submit" value="Submit">
    </form>
    </div> 

搜索后,我得到了问题的答案,所以我想与所有人分享,所以我只发布了我的问题答案。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
<script>
$(document).ready(function(){
var i = $('input').size() + 1;
$('#add').click(function()
{
    $('<div id="d"><input type="text" id="field" name="dynamic[]" value="' + i + '" /><br/><input type="text" class="field1" name="dynamic1[]" value="' + i+i + '" /></div> ').fadeIn('slow').appendTo('.inputs'); 
    i++;
});
$('#remove').click(function() {
if(i > 1) {
    $('.field:last').remove();
    $('.field1:last').remove();
    i--; 
}
});
$('#reset').click(function() {
while(i > 2) {
    $('.field:last').remove();
    $('.field1:last').remove();
    i--;
}
}); 
});
</script>
<style>
.field{
padding:0 0 0 0;
    margin: 0 5px 24px 78px;
}
.field1{
padding:0 0 0 0;
    margin: 0 5px 24px 78px;
 }
#d{
  display:flex;
}
.submit{
width:110px;
background-color:#FF6;
padding:3px;
border:1px solid #FC0;
margin-top:20px;
}   
</style>
<body>
<div>
    <a href="#" id="add">Add</a> | <a href="#" id="remove">Remove</a>  | <a href="#" id="reset">Reset</a>  
<form method="post" action="dd.php">
    <div class="inputs">    
    </div>
    <input name="submit" type="submit" class="submit" value="Submit">
</form>
</div> 
</body>
</html>

dd.php

<?php
    foreach($_POST["dynamic"] as $key)
    {
      echo  $key;
    }
?>