Question

我在使用JavaScript Ajax时遇到问题。我已经创建了简单的CRUD应用。当我第一次编辑表中的一条记录时，数据会正确显示，但是在第二，第三条的情况下，…编辑数据会重复两次，等等。

以下代码的这一部分似乎存在一些问题：

var products = JSON.parse(JSON.stringify(data));

，因为它传递了太多数据。在第二次编辑时-2个对象，而不是1个，等等。

    $(document).ready(function(){
$("#update").hide();

assignDataToTable();

$('table').on('click', 'button[id="edit"]', function(e){
    var id = $(this).closest('tr').children('td:first').text();
   var name = $(this).closest('tr').children('td:nth-child(2)').text(); 
   var price = $(this).closest('tr').children('td:nth-child(3)').text(); 
   var quantity = $(this).closest('tr').children('td:nth-child(4)').text();

    $("#name").val(name);
    $("#price").val(price);
    $("#quantity").val(quantity);

    $("#update").show();
    $("#save").hide();

    $("#update").click(function() {

        var priceNum = parseFloat($("#price").val());
        var quantityNum = parseInt($("#quantity").val());

        var jsonVar = {
            name: $("#name").val(),
            price: priceNum,
            quantity: quantityNum
        };
        $.ajax({
            type:"PUT",
            data: JSON.stringify(jsonVar),
            contentType: "application/json",
            url:"http://localhost:8080/api/products/" + id,
            success: function(data){
                alertUsing("Zmieniono", true);
                $("#update").hide();
                $("#save").show();
                $("#name").val("");
                $("#price").val("");
                $("#quantity").val("");
                assignDataToTable();


            },
            error: function(err) {  
                console.log(err);
            }


    });
    });

})

  function assignDataToTable() {
    $("#tbody").empty();
    $.ajax({
      type:"GET",
      contentType: "application/json",
      url:"http://localhost:8080/api/products",
      success: function(data) {
         var products = JSON.parse(JSON.stringify(data));

          console.log(products);
        for (var i in products) {
            $("#tbody").append(`<tr> 
                        <td>${products[i].id}</td> 
                        <td>${products[i].name}</td> 
                        <td>${products[i].price}</td> 
                        <td>${products[i].quantity}</td> 
                        <td>  <button id='delete' class='btn btn-danger'>Usun</button> 
                       <button id='edit' class='btn btn-warning'>Edytuj</button>  </td> 
                    </tr>`);
        }
      },
      error: function(data) { 
        console.log(data);
        }
    });

}

HTML代码：

<!DOCTYPE html>
<html lang="pl">
<head>
<title>Hurtownia</title>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<script src="popper.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.js"></script>
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> -->
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> -->
<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" href="./css/style.css">

<div class="container-fluid">
    <div class="row">
        <div class="col-9">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th scope="col">Id</th>
                  <th scope="col">Nazwa</th>
                  <th scope="col">Cena</th>
                  <th scope="col">Ilosc</th>
                </tr>
              </thead>
              <tbody id="tbody">

                </tbody>
            </table>
        </div>
        <div class="col-3">
            <div class="form-group form-vales">
                <input id="nameSearch" class="form-control" placeholder="Nazwa">
                <button id="search" type="button" class="btn btn-info">Szukaj</button>
                <input id="name" class="form-control" placeholder="Nazwa">
                <input id="price" class="form-control" placeholder="Cena">
                <input id="quantity" class="form-control" placeholder="Ilosc">
                <button id="save" type="button" class="btn btn-info">Dodaj</button>
                <button id="update" type="button" class="btn btn-success">Edytuj</button>
                <div class="alert" role="alert">

                </div>
            </div>
        </div>
    </div>
</div>

任何有助于解决此问题的帮助将不胜感激。

Answer 1

您不需要对从服务器返回的数据进行分类处理。假设您的服务器返回JSON。您的函数assignDataToTable包含ajax异步调用，因此它将在调用成功or error`函数之前返回。几乎可以肯定这不是您想要的。这意味着用户交互可能在表更新之前发生，从而导致损坏。但是，它不一定会导致您遇到错误。

Ajax-将表中的内容加倍

1 个答案: