Ajax - 將表格中的內容加倍

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錯誤”函數之前返回。 這幾乎肯定不是您想要的。 這意味着用戶交互可能在您的表更新導致損壞之前發生。 但是，它不一定會導致您遇到的錯誤。

Ajax - 將表格中的內容加倍

問題描述

1 個解決方案

解決方案1
0 2019-07-02 11:00:57

Ajax - 將表格中的內容加倍

問題描述

1 個解決方案

解決方案1 0 2019-07-02 11:00:57

解決方案1
0 2019-07-02 11:00:57