如何在PHP和AJAX中用两边的更新按钮更新任何行，而不是仅更新第一行

Question

刚开始时听起来像是一个菜鸟问题，但是我如何使用更新按钮来更新单个行而不是仅更新第一行。 每当我使用“更新”按钮时，仅当请求位于第一行时，请求才会通过。

这是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";
}
?>

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

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

Answer 1

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

像第一行的id一样，id，mod，ctgr等元素

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

jQuery查找第一个元素，如果存在多个具有相同ID的元素

您可以通过在其上附加一个uniqe增量变量$ 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函数，并将该参数标识为row

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

Answer 2

这是因为您有重复的输入ID，HTML上应该只有一个ID且具有相同的值，这在某些方面是有效的，不会出现错误，但是当您尝试访问这些ID时会遇到JavaScript问题，您只会得到第一个。

要解决此问题，您可以删除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);
                }
            });
        });
    });

如何在PHP和AJAX中用两边的更新按钮更新任何行，而不是仅更新第一行

问题描述

2 个解决方案

解决方案1
0 2018-11-04 02:42:43

解决方案2
0 已采纳 2018-11-04 09:37:35

如何在PHP和AJAX中用两边的更新按钮更新任何行，而不是仅更新第一行

问题描述

2 个解决方案

解决方案1 0 2018-11-04 02:42:43

解决方案2 0 已采纳 2018-11-04 09:37:35

解决方案1
0 2018-11-04 02:42:43

解决方案2
0 已采纳 2018-11-04 09:37:35