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

对于某些上下文，我有三个用于拖放项目的div。第一个div将是开始工作的默认div。然后，当我将内容放入数据库时，我希望后两个div更新数据库。这些div将是动态的，我可能在任何时候有5或6个div，但也可能只有2或3个div。我对javascript不是很有经验。我已经走到了这一步，但我正努力走得更远。这是一个由三部分组成的问题：

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

B） 如何使用ajax请求将多个$\u POST值发送到update.php？我尝试了

data:{data:data，name:name，check:check，amount:amount}，

，但这使我的sum div停止工作。如果我按原样运行它，我只会得到“amount”值（即div id），但它不会作为“amount”过帐。我试图获取被删除元素的div id（amount）、被删除元素的div内容（name）和对象被删除到的div id，或者父div的id（check）。正如我之前所说，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>

---

我的第一个注意事项是在命名变量时要更加具体，这将帮助您了解问题发生的位置。例如，此代码可能有效，但很难阅读：

data:{data:data}

关于你的问题：

a） 您正在标识（

）并引用具有非唯一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({
    type:'POST',
    url:'../update.php',
    data:{data: amountData},
    context: amountData,
    success: function(){
        total += parseFloat(this.amount);
        $('#sum').html(total);
    }
});

{
    "total": "1.00"
}

$.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);  
    }
});

然后您希望修改它的结构，使其更具信息性，因此我们将对其进行如下定义：

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

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

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

{
    "total": "1.00"
}

$.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);  
    }
});

您的ajax调用应该如下所示：

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

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

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

{
    "total": "1.00"
}

$.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);  
    }
});

我正在使用javascript函数上下文将数据传输到

success

方法中。这个话题很复杂，你可以读一下，我这里不详细介绍

注意，我已经添加了

上下文：amountData

配置。这意味着在

success

方法中，

This

等于

amountData

变量

现在，

this=amountData

我可以使用点表示法引用它的对象结构。因此，为了从上下文对象中获取数量，我只引用它，如下所示：

total += parseFloat(this.amount);

c） 关于从PHP返回数据。PHP不是我的强项，但基本上您希望在PHP页面响应中输出有效的JSON。假设您的PHP返回JSON，如下所示：

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

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

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

{
    "total": "1.00"
}

$.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);  
    }
});

阅读关于这个问题的评论：

具体评论#2（截至本次编辑）

接下来，您要修改AJAX调用，如下所示：

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

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

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

{
    "total": "1.00"
}

$.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是相互排斥的