javascript - 使用ajax编辑和更新数据

Question

我的代码有什么问题。我想使用 AJAX 从可编辑(表单)中检索数据以更新并保存在数据库中，但效果不佳，

这是我的代码:

<?php
    $query = db_get_list("SELECT * FROM stories ORDER BY id DESC");
    foreach($query as $item) {
        $id= $item['id'];
?>
        <?php var_dump($item['id']); ?>
        <tr>
            <th scope="row"><?php echo $item['id'];?></th>
            <td class="ttruyen" id="tentruyen_<?php echo $item['id'];?>" contenteditable="true">
                <?php echo $item["tentruyen"]; ?>
            </td>
            <td class="tgia" id="tacgia_<?php echo $item['id'];?>" contenteditable="true">
                <?php echo $item["tacgia"]; ?>
            </td>
            <td class="ttat" id="tomtat_<?php echo $item['id'];?>" contenteditable="true">
                <?php echo $item["tomtat"]; ?>
            </td>
            <td class="ndung" id="noidung_<?php echo $item['id'];?>" contenteditable="true">
                <?php echo $item["noidung"]; ?>
            </td>
            <td><button class="label delete label-danger" id='del_<?php echo $item['id']; ?>' ">delete</button></td>
            <td><button class="label edit label-info" id="edit_<?php echo $item['id']; ?>">edit</button></td>
        </tr>
<?php } ?>

使用 AJAX 进行编辑功能:

$(document).on('click', '.edit' ,function() {
        var id = this.id;
        var split_id = id.split("_");
        var field_name = split_id[0];
        var edit_id = split_id[1];
        var value = $(this).text();

        var ttruyen =  $('#ttruyen').text();
        var tgia =  $('#tgia').text();
        var ttat =  $('#ttat').text();
        var ndung =  $('#ndung').text();
       $.ajax ({
           url : "modules/favorites/edit.php",
           type : "POST",
           dataType : "text",
           data : {
               tentruyen: ttruyen, tacgia: tgia, id:edit_id , tomtat : ttat, noidung : ndung
           },
           success: function (data) {
               $('#alert_message').html("<div class='col-sm-4 alert alert-success' ><b>Edit</b> data successfully</div>");
               fetchdata(data);
           }
       });
       setInterval(function() {
           $("#alert_message").html('');
       }, 3000);
    });

Answer 1

这是另一种方法。

<?php
$query = db_get_list("SELECT * FROM stories ORDER BY id DESC");
foreach($query as $item) {
    $id= $item['id'];
    var_dump($item['id']); ?>
    <tr>
        <th scope="row"><?php echo $item['id'];?></th>
        <td class="ttruyen" id="tentruyen" contenteditable="true">
            <?php echo $item["tentruyen"]; ?>
        </td>
        <td class="tgia" id="tacgia" contenteditable="true">
            <?php echo $item["tacgia"]; ?>
        </td>
        <td class="ttat" id="tomtat" contenteditable="true">
            <?php echo $item["tomtat"]; ?>
        </td>
        <td class="ndung" id="noidung" contenteditable="true">
            <?php echo $item["noidung"]; ?>
        </td>
        <td><button class="label delete label-danger" id="del">delete</button></td>
        <td><button class="label edit label-info" id="edit" data-id="<?php echo $item['id']; ?>">edit</button></td>
    </tr>
 <?php } ?>

上面的代码，去掉了所有的$item['id']在每个 td 。它还添加了 id为您edit button在这里data-id="<?php echo $item['id']; ?>" 。它还删除了不必要的代码。

要获取所有必需的数据，

   $('button#edit').on('click' ,function() {
    var id = $("p#item_id").text();
    var edit_id = $(this).data('id');

    var ttruyen =  $('td#ttruyen').text();
    var tgia =  $('td#tgia').text();
    var ttat =  $('td#ttat').text();
    var ndung =  $('td#ndung').text();

   $.ajax ({
       url : "modules/favorites/edit.php",
       type : "POST",
       dataType : "text",
       data : {tentruyen: ttruyen,
               tacgia: tgia,
               id:edit_id ,
               tomtat : ttat,
               noidung : ndung},
       success: function (data) {
           $('#alert_message').html("<div class='col-sm-4 alert alert-success' ><b>Edit</b> data successfully</div>");
           fetchdata(data);
       }
   });
   setInterval(function() {
       $("#alert_message").html('');
   }, 3000);
});

$("button#edit")获取 td 内单击的特定按钮。所以不需要给每个人一个 id="edit_<?php echo $item_id; ?>" 。那应该有效。如果这是解决方案，请不要忘记将接受设置为正确答案。谢谢。