PHP / MySQL / AJAX - 更新多个数据

Posted 2023-02-24

【中文标题】PHP / MySQL / AJAX - 更新多个数据

【英文标题】：PHP / MySQL / AJAX - Update multiple data

【发布时间】：2018-10-21 19:10:23

【问题描述】：

如何使用 AJAX 更新多个数据？

示例：

表A

id : 1, 2

姓名：杰克，约翰

它仅适用于 ID 1，当我尝试编辑 ID 2 的名称时，它不起作用。

我已尝试使用此代码但失败了。

html/php：

...

    while($row=mysqli_fetch_array($query))
    echo'    
    <form class="btn-group">
        <input type="text" class="form-control" name="id_user" id="id_user" data-user="'.$row['id'].'" value="'.$row['id'].'">
        <input type="text" class="form-control" name="id_status" id="id_status" data-status="'.$row['id'].'" value="'.$row['id'].'">
        <button type="submit" id="likestatus" class="btn btn-primary btn-outline btn-xs"><i class="fas fa-thumbs-up"></i></button>
        </form>
    ';
    

AJAX：

$(document).ready(function()
    $("#likestatus").click(function()
    var id_user=$("#id_user").data("user");
    var id_status=$("#id_status").data("status");
        $.ajax(
        url:'status/like-status.php',
        method:'POST',
        data:
            id_user:id_user,
            id_status:id_status
            ,
            success:function(response)
            alert(response);
            
        );
    );
);

【参考方案1】：

从不完整的 PHP 来看，看起来好像您没有在循环中分配给 $ruser。这意味着您总是将相同的 id 发布到 like-status.php。

PS：本来可以发表评论，但我不能。

【参考方案2】：

您的代码的问题是 id 应该是唯一的，但是在循环中您创建具有相同 id 的元素。

在事件处理程序中使用this 来查找已单击按钮的兄弟姐妹-最接近返回表单类型的父级。

$(document).ready(function()
    $(".btn-primary").click(function()
        var $form = $(this).closest('form');
        var id_user=$form.find('[name="id_user"]').data("user");
        var id_status=$form.find('[name="id_status"]').data("status");
            $.ajax(
            url:'status/like-status.php',
            method:'POST',
            data:
                id_user:id_user,
                id_status:id_status
                ,
                success:function(response)
                alert(response);
                
            );
    );
);

您可能希望使用自己的类而不是 .btn-primary，因为这会影响页面上的所有按钮。

【参考方案3】：

您多次使用该 ID。因此，您对var id_user=$("#id_user").data("user"); 的查询始终会找到页面上的第一个输入字段。您应该避免在一个页面上多次使用相同的 id（请参阅this Question）。

您可以订阅表单的jQuery submit event，然后在该表单中搜索输入字段，以正确提取id_user 和status_user 值。为此，您必须向 <form> 元素添加适当的事件侦听器。要查找表单，我建议添加一个 CSS 类，例如 like-status-form。

$(document).ready(function()
    // We're attaching a submit-event listener to every element with the css class "like-status-form"
    $(".like-status-form").submit(function(event)
       // Form get's submitted
       // Prevent that the Browser reloads the page
       event.preventDefault();

       // Extract the user id and status from the form element (=== $(this))
       var id_user = $(this).find('[name="id_user"]').data('user');
       var id_status = $(this).find('[name="id_status"]').data('status');

       // TODO Perform AJAX Call here
    );
);

要检测表单元素，可以使用 jQuery Attribute Equals Selector。

在https://jsfiddle.net/07yzf8k1/找到一个工作示例

【参考方案4】：

让您的 ID 独一无二，让它们动态化

 <?php

 $counter = 0;

 while($row=mysqli_fetch_array($query))
    $counter++;

    echo'    
    <form class="btn-group">
        <input type="text" class="form-control" id="userid_$counter" data-user="'.$ruser['id'].'" value="'.$ruser['id'].'">
        <input type="text" class="form-control" name="id_status" id="status_$counter" data-status="'.$rtimeline['id'].'" value="'.$rtimeline['id'].'">
        <button type="submit" id="likestatus_$counter" class="btn btn-primary btn-outline btn-xs"><i class="fas fa-thumbs-up"></i></button>
        </form>
    ';
    
?>

然后

<script type="text/javascript">
$(document).ready(function()
    $('[id^="likestatus_"]').on('click',function()
         var index = $(this).attr('id').split("_")[1];
    var id_user=$("#user_"+index).data("user");
    var id_status=$("#status_"+index).data("status");
        $.ajax(
        url:'status/like-status.php',
        method:'POST',
        data:
            id_user:id_user,
            id_status:id_status
            ,
            success:function(response)
            alert(response);
            
        );
    );
);