Question

对于某些情况，我有三个用于拖放项目的div。第一个div将是开始工作的默认div。然后，当我在其中放置内容时，我希望后两个div更新数据库。这些div是动态的，在任何给定的时间我可能有5或6个div，但也只能有2或3。我对javascript不太有经验。我已经走了这么远，但正在努力取得更大进展。这是一个三部分的问题：

A）如何提供每个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"
}

阅读有关此问题的评论： 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是互斥的，具体取决于您的方法。

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

1 个答案: