拖放后如何使用javascript / ajax更新數據庫？

Question

在某些情況下，我有三個用於拖放項目的div。 第一個div將是開始工作的默認div。 然后，當我在其中放置內容時，我希望后兩個div更新數據庫。 這些div是動態的，在任何給定的時間我可能有5或6個div，但也只能有2或3。我對javascript不太有經驗。 我已經走了這么遠，但正在努力取得更大進展。 這是一個三部分的問題：

A）如何提供每個DIV的總和-現在，無論將元素放入哪個div中，總和div的總和。 我還希望在對象離開div時從總和中減去，並從數據庫中刪除該條目（不包括原始的第一個DIV）。

B）如何使用ajax請求將多個$ _POST值發送到update.php？ 我已經嘗試過data:{data: data, name: name, check: check, amount: amount}, ，，但這使我的sum div停止工作。 如果我按原樣運行，我只是獲得“金額”值（即div ID），但不會以“金額”發布。 我正在嘗試獲取放置的元素（數量）的div ID，放置的元素的div內容（名稱）和對象放入的div ID或父div的ID（檢查）。 正如我之前所說的，javascrip / ajax對我來說是新事物。 經過幾個小時的搜索，我沒有找到想要的東西。

C）有沒有辦法從update.php返回'total'變量到我的腳本，而不是在腳本內部添加內容？

JavaScript的

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
var total = 0;
function drop(ev, ui) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
    $.ajax({
    type:'POST',
    url:'../update.php',
    data:{data:data},
    success: function(){
        total += parseFloat(data);
        $('#sum').html(total);
    }
});
}

HTML

<h2>Drag and Drop</h2>
<div id="center">
<div id="2018-08-01" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="move" draggable="true" ondragstart="drag(event)" id="1056.23">Mortgage</div>
<div class="move" draggable="true" ondragstart="drag(event)" id="10">Fees</div>
</div>

<div id="2018-08-05" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sum">Sum Here</div>

<div id="2018-08-15" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sum">Sum Here</div>
</div>

update.php

$name = $_POST['name'];
$check = $_POST['check'];
$amount = $_POST['amount'];
$sql = "INSERT INTO bills (bills_id, bills_name, bills_check, bills_amount) VALUES ('', '$name', '$check', '$amount')";
mysqli_query($connect, $sql);

Answer 1

我的第一個注釋在命名變量時更為具體，這將幫助您了解發生問題的位置。 例如，此代碼可能有效，但是很難閱讀：

data:{data:data}

關於您的問題：

a）您正在標識（ <div id="sum"> ）並引用具有非唯一ID的sum HTML對象（例如，您具有ID為'sum'的多個HTML元素）。 盡管可以將非唯一值分配給HTML標記的ID參數，但這不是正確的處理方法。 jQuery強制執行唯一性，因此當您請求$（'＃sum'）時，它將僅返回具有該ID的第一個元素，而忽略其余元素。

b）關於向POST請求發送多個值。 我需要重命名一些內容（請參見上面的注釋），這樣就很清楚了。

您的行定義為：

var data = ev.dataTransfer.getData("text");

應該這樣命名：

var amountData = ev.dataTransfer.getData("text");

然后，您想修改它的結構以提供更多信息，因此我們將如下定義它：

var amountData = {
  name: "some name",
  check: check,
  amount: ev.dataTransfer.getData("text")
}

您的ajax調用應如下所示：

$.ajax({
    type:'POST',
    url:'../update.php',
    data:{data: amountData},
    context: amountData,
    success: function(){
        total += parseFloat(this.amount);
        $('#sum').html(total);
    }
});

我正在使用javascript函數上下文將您的數據轉移到success方法中。 這個主題很復雜，您可以閱讀它，這里不再贅述。

請注意，我添加了context: amountData配置。 這意味着在您的success方法內部， this等於amountData變量。

現在， this = amountData可以使用點符號引用它的對象結構了。 因此，要從上下文對象中提取金額，我可以像這樣引用它：

total += parseFloat(this.amount);

c）關於從PHP返回數據。 PHP不是我的強項，但是基本上您想在PHP頁面響應中輸出有效的JSON。 因此，假設您的PHP正在像這樣返回JSON：

{
    "total": "1.00"
}

閱讀有關以下問題的評論： 將JSON從PHP返回到JavaScript？

特別是評論2（截至此修改）

接下來，您要修改AJAX調用，使其看起來像這樣：

$.ajax({
    type:'POST',
    url:'../update.php',
    data:{data: amount_data},
    dataType: 'json',
    error: function(xhr, status, error) {
        // Get some feedback in your browser console if something goes wrong.
        console.info(status + ": " + error); 
    },
    success: function(responseData){
        total = parseFloat(responseData.total);

        // You need to better identify your HTML tags.
        $('#sum-more-unique-id').html(total);  
    }
});

響應與B和C是互斥的，具體取決於您的方法。