如何使用javascript/ajax在拖放后更新数据库？
对于某些上下文，我有三个用于拖放项目的div。第一个div将是启动程序的默认div。然后，当我将内容放到数据库中时，我希望第二个div更新数据库。这些div将是动态的，我可能在任何时候有5到6个div，但也只能有2到3个。我对javascript不是很有经验。我已经走到这一步了，但我正在努力走得更远。这是一个由三部分组成的问题：
A)如何为每个DIV提供一个sum -现在无论我将元素放到哪个div中，sum div都会求和。我还希望在对象离开div时从总和中减去，并从数据库中删除条目(不包括最初的第一个DIV)。
B)如何使用ajax请求向update.php发送多个$_POST值？我尝试过data:{data: data, name: name, check: check, amount: amount},，但这会使我的sum div停止工作。如果我按原样运行，我只会得到"amount“值(这是div id)，但它不会记为”amount“。我正在尝试获取被拖放元素的div id (数量)、被拖放元素的div内容(名称)和对象被拖放到的div id，或者父div的id (检查)。正如我之前所说的，javascrip/ajax对我来说是个新鲜事。我找了好几个小时也找不到我要找的东西。
C)有没有办法将'total‘变量从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);回答 1
Stack Overflow用户
发布于 2018-08-18 02:45:11
我的第一个注意事项是在命名变量时更加具体，这将帮助您了解问题发生在哪里。例如，下面的代码可能是有效的，但是很难读懂：
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，我可以使用点符号引用它的对象结构了。因此，为了从context对象中获取数量，我只需像这样引用它：
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是互斥的，这取决于您的方法。
https://stackoverflow.com/questions/51900515
复制相似问题