AJAX POST表单始终发布列表中第一条记录中的数据

如何解决AJAX POST表单始终发布列表中第一条记录中的数据

我发现此问题与我的AJAX发布方法有关。如果我使用标准方法（action =“”）发布此表单，则效果很好，它将根据我在列表中选择发布的记录来对数据库进行映射。但是，当我使用AJAX Post方法时，它将仅使用SQL结果列表中的第一条记录填充值。我使我的输入字段可见，并且所有发布的内容都是唯一且符合预期。下面是完整的代码。

<?php

// Create connection
$conn = new mysqli($servername,$username,$password,$dbname);

/// Check SQL connection
if ($conn->connect_error) {

echo"my error";

die();

}     

// Get the the data from the database

$sql = "SELECT * FROM clients WHERE";
$result = $conn->query($sql);

// Check database connection first
if ($conn->query($sql) === FALSE) {

echo"my error";

exit(); 
}


   else if ($result->num_rows > 0) {

   while($row = $result->fetch_assoc()) {
   

echo'

<div class="col-md-3 bid-section">
 
 
<form  action="" method="post" > <!-- Favourites -->
<input type="text" class ="name" name="name" value="'.$row["name"].'">
<input type="text" class ="surname" name="surname" value="'.$row["surname"].'">
<input type="text" class ="country" name="country" value="'.$row["country"].'">

<a   class ="favourite-btn" >
<div class="'.$favicon.'"></div>
</a>
</form>


</div> <!-- Column 3 END -->';
 

  }
}
  
mysqli_free_result($result);
mysqli_close($conn);

?>
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
AJAX script
$(document).ready(function(){

    $('.favourite-btn').click(function(event){
       event.preventDefault();
        
        var field1= $('.name').val();
        var field2= $('.surname').val();
        var field3= $('.country').val();
        
                 
        $.post('mydirectory/add_names_sql.php',{name:field1,surname:field2,country:field3},// Alert Success
         function(data){
       
        // Alerts the results to this Div
            $('.favourite-btn').html(data);
            
        });
    });
});
</script>  



解决方法

$（'。name'）。val（）`是该类的第一个元素的值。您需要选择与单击的按钮具有相同形式的元素。

        var form = $(this).closest("form");
        var field1= form.find('.name').val();
        var field2= form.find('.surname').val();
        var field3= form.find('.country').val();

您还可以通过以下方式获取所有表单输入：

        var formdata = $(this).closest("form").serialize();

在回调函数中，您还需要更新相应的元素。

form.find('.favourite-btn').html(data);