javascript - 使用 AJAX 将变量从动态 html 表传递到 php 更新查询

Question

我想在输入文本 valor 中添加一个值并将该值分配给它所在的行，为此我需要传递给更新查询 ID 和勇气。

我做错了什么？

Table

<?php
$IDTipoEquipamento = $_POST['Car'];
$result = mysqli_query($conn,"SELECT tipocaracteristicas.IDTipoCaracteristicas,tipoequipamento.TipoEquipamento, caracteristicas.Caracteristica, Valor FROM `tipocaracteristicas` LEFT JOIN tipoequipamento on tipoequipamento.IDTipoEquipamento= tipocaracteristicas.IDTipoEquipamento LEFT JOIN caracteristicas on caracteristicas.IDCaracteristicas=tipocaracteristicas.IDCaraterisiticas  WHERE tipocaracteristicas.IDTipoEquipamento= '$IDTipoEquipamento';");
echo "<table width='100% class='sortable' id='datatables-example'>
    <tr>
</tr>
    <tr>
    <td class='pure-table'></td>
        <td class='pure-table'><b>Tipo de Equipamento</b></td>
        <td class='pure-table'><b>Caracteristica</b></td>
        <td class='pure-table'><b>Valor</b></td>
        <td class='pure-table'><b>Atribuir</b></td>
    </tr>";  
while($row = mysqli_fetch_array($result)) 
{
echo "<tbody data-link='row' class='rowlink'>";
echo "<tr>";
echo "<td><input type='text' name='IDTipoCaracteristicas' id='IDTipoCaracteristicas' value='". $row['IDTipoCaracteristicas'] . "'></td>";
echo "<td>" . $row['TipoEquipamento'] . "</td>";
 echo "<td>" . $row['Caracteristica'] . "</td>";
echo "<td><input type='text' name='valor' id='valor' value=''></td>";
echo "<td><a href='' onclick='UpdateTable()'><img id='img' src='save_icon.gif'/></a></td>";
echo "</tr>";
echo "</tbody>";    
}
echo"<br>";
echo "</table>";
mysqli_close($conn);
}
?>

Jquery + Ajax

<script type="text/javascript">
    function UpdateTable() {

         $("#valor").on('input', function() {
            var valor = $(this).val();

      $.ajax({
            url: 'insertCharacteristicsEquipment.php',
            type: "POST",
            cache:false,
            data:{valor:valor},
            async: false,
            dataType:'html',
            success:function(data) {
                 $("#valor").html(data); 
                  alert(data);
            },
            error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });
        });

          $("#IDTipoCaracteristicas").on('input', function(){
            var IDTipoCaracteristicas = $(this).val();
         $.ajax({
            url: 'insertCharacteristicsEquipment.php',
            type: "POST",
            cache:false,
            data:{IDTipoCaracteristicas:IDTipoCaracteristicas},
            async: false,
            dataType:'html',
            success:function(data) {
                  $("#IDTipoCaracteristicas").html(data);
                  alert(data);
            },
            error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });

        });
    }
</script>

PHP UPDATE QUERY PAGE

<?php
include ('conetar.php');
if(isset($_POST['valor'], $_POST['IDTipoCaracteristicas'])){
    $valor = $_POST['valor'];
    $IDTipoCaracteristicas= $_POST['IDTipoCaracteristicas'];
    $sql = "UPDATE `tipocaracteristicas` SET `Valor`='$valor' WHERE `IDTipoCaracteristicas`= '$IDTipoCaracteristicas'";
   if(mysqli_query($conn,$sql)){  
} else{
    echo "ERROR: Could not able to execute $sql. ";
}  
    mysqli_close($conn)
}
?>

Answer 1

这里看下面两条语句，

echo "<td><input type='text' name='IDTipoCaracteristicas' id='IDTipoCaracteristicas' value='". $row['IDTipoCaracteristicas'] . "'></td>";
                                                          ^^^^^^^^^^^^^^^^^^^^^^^^^

和

echo "<td><input type='text' name='valor' id='valor' value=''></td>";
                                          ^^^^^^^^^  ^^^^^^^^

您要为所有表格行分配相同的 id，请改用 class。为您的每个 IDTipoCaracteristicas、Valor 输入元素以及更新表 超链接分配类。此外，您没有在 Valor 输入元素中分配任何值。此外，使用 javascript:void(0); 使 anchor 标记不可链接，否则每次单击链接时都会被重定向。所以你的 while() 循环应该是这样的:

while($row = mysqli_fetch_array($result)) {
    echo "<tbody data-link='row' class='rowlink'>";
    echo "<tr>";
    echo "<td><input type='text' name='IDTipoCaracteristicas' class='IDTipoCaracteristicas' value='". $row['IDTipoCaracteristicas'] . "'></td>";
    echo "<td>" . $row['TipoEquipamento'] . "</td>";
    echo "<td>" . $row['Caracteristica'] . "</td>";
    echo "<td><input type='text' name='valor' class='valor' value='". $row['Valor'] ."'></td>";
    echo "<td><a href='javascript:void(0);' class='updateTable'><img id='img' src='save_icon.gif'/></a></td>";
    echo "</tr>";
    echo "</tbody>";    
}

随后，您的 jQuery/AJAX 代码应如下所示:

<script>
    $(document).ready(function(){
        $(document).on('click', '.updateTable', function(){
            var IDTipoCaracteristicas = $(this).parents('tr').find('.IDTipoCaracteristicas').val();
            var valor = $(this).parents('tr').find('.valor').val();

            $.ajax({
                url: 'insertCharacteristicsEquipment.php',
                type: "POST",
                cache:false,
                data:{valor:valor, IDTipoCaracteristicas: IDTipoCaracteristicas},
                async: false,
                success:function(data){
                    alert(data);
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });
        });
    });
</script>