PHP中用AJAX从while循环插入动态数据失败，寻求技术帮助

我帮你梳理下代码里的几个核心问题，然后给出修改后的完整代码：

核心问题分析 #

• 重复ID冲突：你在while循环里给每个隐藏字段和按钮都用了相同的id="name"和id="button"，HTML中ID是全局唯一的，所以jQuery只会绑定第一个按钮的点击事件，后面的按钮点击完全不会触发正确逻辑。
• 冗余JS代码：把<script>放在循环内部，会为每个用户生成一遍完全相同的JS代码，既浪费资源又容易引发冲突。
• SQL注入风险：insert.php里直接把$_POST['name']拼进SQL语句，没有任何安全处理，这是非常危险的操作，很容易被攻击。
• 数据库连接变量不一致：前端查询用户列表用的是$con，但后端insert.php用的是$conn，如果你的db.php里定义的连接变量是其中一个，另一个就会导致数据库连接失败。
• 注释掉了关键查询代码：原代码里$sql_query = mysqli_query($con,$sql);被注释了，这会导致循环根本无法获取用户数据。

前端代码修改（修复ID冲突+优化JS逻辑） #

<!----Suggested users Start---->
<div class="ms_heading">
 <h1>Suggested Users</h1>
</div>
<div class="swiper-wrapper">
 <?php 
 require '../db.php';
 $sql = "select * from users order by id desc";
 $sql_query = mysqli_query($con,$sql); // 取消注释这行，否则拿不到用户数据
 while ($row = mysqli_fetch_array($sql_query)) {
 $id = $row['id'];
 $user_image = $row['profile_img'];
 $myusername = $row['Username'];
 ?>
 <div class="swiper-slide">
 <div class="ms_rcnt_box">
 <div class="ms_pro_img">
 <img src="User_Images/<?php echo $user_image;?>" alt="<?php echo $myusername;?>" class="img-fluid">
 </div>
 <div class="ms_rcnt_box_text">
 <center><b><a href=""><p><?php echo isset($myusername) ? $myusername : '';?></p></a></b></center><br/>
 <!-- 把唯一ID改成类，用data属性存用户ID更直观 -->
 <input type="hidden" class="user-id" value="<?php echo $id;?>">
 <!-- 按钮用类代替ID，避免重复 -->
 <button type="button" class="save-btn">SAVE</button>
 </div>
 </div>
 </div>
 <?php } ?>
</div>

<!-- JS代码移到循环外面，只加载一次 -->
<script>
$(document).ready(function(){
 // 用事件委托处理动态生成的按钮，不管新增多少用户都能生效
 $(document).on('click', '.save-btn', function(){
 // 找到当前按钮所在容器里的用户ID，确保拿到的是对应用户的ID
 var userId = $(this).closest('.ms_rcnt_box_text').find('.user-id').val();
 
 $.ajax({
 url:'insert.php',
 method:'POST',
 data:{
 userId: userId // 参数名更清晰，避免歧义
 },
 success:function(data){
 alert(data);
 },
 // 增加错误处理，方便调试
 error:function(xhr, status, error){
 alert('请求出错：' + error);
 }
 });
 });
});
</script>

后端代码修改（修复连接+防止SQL注入） #

<?php 
require '../db.php';
// 先判断必要参数是否存在
if(isset($_POST['userId'])){
    $userId = $_POST['userId'];
    // 使用预处理语句彻底防止SQL注入
    $sql = "INSERT INTO `myTest` (`name`) VALUES (?)"; 
    // 注意这里用和前端一致的连接变量$con，确保db.php里的变量名匹配
    $stmt = $con->prepare($sql);
    // 假设用户ID是整数类型，用"i"；如果是字符串类型改成"s"
    $stmt->bind_param("i", $userId);
    
    if ($stmt->execute()) {
        echo "数据插入成功";
    } else {
        echo "插入失败：" . $stmt->error;
    }
    $stmt->close();
} else {
    echo "缺少必要参数";
}
$con->close(); // 记得关闭数据库连接
?>

额外注意事项 #

1. 确认db.php里的数据库连接变量是$con还是$conn，前后端必须保持一致，否则会连接失败。
2. 建议把myTest表的name字段改成user_id，语义更清晰，避免和SQL关键字混淆。
3. 可以给按钮增加点击后的禁用状态，防止用户重复点击，比如：

var $btn = $(this);
$btn.prop('disabled', true);
// AJAX请求完成后恢复按钮状态
$.ajax({
    // ...其他配置
    complete:function(){
        $btn.prop('disabled', false);
    }
});

内容的提问来源于stack exchange，提问作者Liam