如何在 PHP 和 AJAX 中使用更新按钮更新任何行，而不仅仅是顶行答案

【问题标题】：How can I update any row rather than only the top row with the update button on each side in PHP and AJAX如何在 PHP 和 AJAX 中使用更新按钮更新任何行，而不仅仅是顶行
【发布时间】：2018-11-04 02:31:21
【问题描述】：

刚开始听起来像是一个菜鸟问题，但我如何使用更新按钮来更新单个行，而不仅仅是顶行。每当我使用更新按钮时，只有在最上面一行时，请求才会通过。

这是 index.php 的代码

<html>
<head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <center>
    <h3>UPDATE DATA</h3>

    <?php
    $run = 0;
    $conn = new mysqli('localhost', '', '', '');
    $sql = "SELECT * FROM moderator";
    $result = $conn->query($sql);
    while ( $row=mysqli_fetch_assoc($result)) {
        $run = $run + 1;
       ?>
       <div>

       ID<input type="text" id="id" value="<?php echo $row['id']; ?>">;
       Moderator<input type="text" id="mod" value="<?php echo $row['name']; ?>">;         
       Category<input type="text" id="ctgr" value="<?php echo $row['category']; ?>">;

       <button type="submit" id="update" rel="<?php echo $run; ?>">UPDATE</button>
       </div>
       <?php
    }?> 

    </center>
    <script>
        $(document).ready(function(){
            $("#update").click(function(){
                var name=$("#mod").val();
                var ctgr=$("#ctgr").val();
                var id=$("#id").val();
                $.ajax({
                    url:'update.php',
                    method:'POST',
                    data:{
                        name:name,
                        ctgr:ctgr,
                        id:id
                    },
                    success:function(response){
                        alert(response);
                    }
                });
            });
        });
    </script>
</body>

这是update.php的代码

<?php

$conn = new mysqli('localhost', '', '', '');
$name=$_POST["name"];
$ctgr=$_POST["ctgr"];
$id=$_POST["id"];
$sql="UPDATE moderator set name='$name', category='$ctgr' where id='$id'";
if($conn->query($sql)===TRUE){
    echo "DATA updated";
}
?>

您可能会看到我正在尝试为每一行创建一个单独的变量，但我无法弄清楚。抱歉，代码也很乱。

我已删除数据库信息，但在插入凭据时会显示这些行。

【问题讨论】：

您的每个表单输入都将共享相同的 ID，这是不正确的。每个元素都应该有自己的 ID。处理此问题的最佳方法是为每个input 提供自己的唯一 ID，然后通过您的 AJAX 传递整个表单请求。然后在您的 PHP 中，您可以遍历更新语句的值。

标签： javascript php html ajax mysqli

【解决方案1】：

这是因为你有重复的输入 id，你应该只有一个 html 上具有相同值的 ID，这在某种程度上是有效的，你不会收到错误，但是当你尝试使用 javascript 时会遇到问题访问那些 id，你只会得到第一个。

要解决此问题，您可以删除 id 并将其作为类：

   <div>

   ID<input type="text" class="id" value="<?php echo $row['id']; ?>">;
   Moderator<input type="text" class="mod" value="<?php echo $row['name']; ?>">;         
   Category<input type="text" class="ctgr" value="<?php echo $row['category']; ?>">;

   <button type="submit" class="update" rel="<?php echo $run; ?>">UPDATE</button>
   </div>

并使用这个 JS：

    $(document).ready(function(){
        $(".update").click(function(){
            var container = $(this).closest('div'); // parent div
            var name = container.find('.mod').val();
            var ctgr = container.find('.ctgr').val();
            var id = container.find('.id').val();
            $.ajax({
                url:'update.php',
                method:'POST',
                data:{
                    name:name,
                    ctgr:ctgr,
                    id:id
                },
                success:function(response){
                    alert(response);
                }
            });
        });
    });

【讨论】：

【解决方案2】：

您所有的行输入元素都具有相同的 id 属性

第一行元素的 id 类似于 id、mod、ctgr

第二行元素的 id 也是 id, mod ctgr

jquery 查找第一个元素，如果有多个相同 id 的元素

您可以通过将唯一的增量变量 $run 附加到它来创建唯一的 ID

ID<input type="text" id="id"+<?php echo $run; ?> value="<?php echo $row['id']; ?>">; Moderator<input type="text" id="mod"+<?php echo $run; ?> value="<?php echo $row['name']; ?>">; Category<input type="text" id="ctgr"+<?php echo $run; ?> value="<?php echo $row['category']; ?>">; <button type="submit" id="update" rel="<?php echo $run; ?>" onclick="updatetodb(  <?php echo $run; ?>);“  >UPDATE</button>

然后使用一个参数创建一个名为 updatetodb 的 javascript 函数，并通过该参数将行标识为

function updatetodb(var run) {
var id=$('#id' +run).value;

【讨论】：

非常感谢！！这实际上是我最初尝试这样做的感谢您的帮助