使用 javascript/ajax 拖放后如何更新数据库？

Question

在某些情况下，我有三个用于拖放项目的 div。第一个 div 将是开始的默认 div。然后，当我将内容放入其中时，我希望后两个 div 更新数据库。这些 div 将是动态的，我随时可能有 5 或 6 个 div，但也只能有 2 或 3 个。我对 javascript 不是很有经验。我已经走到了这一步，但我正在努力争取更进一步。这是一个三部分的问题：

A) 我如何提供每个 DIV 的总和 - 现在无论我将元素放入哪个 div，总和 div 都会相加。我还希望在对象离开 div 时从总和中减去，并从数据库中删除条目（不包括原始的第一个 DIV）。

B) 如何使用 ajax 请求向 update.php 发送多个 $_POST 值？我试过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 返回到我的脚本，而不是在脚本中添加内容？

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"
}

阅读有关此问题的 cmets： Returning JSON from PHP to 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 是互斥的。