javascript - 使用 javascript/ajax 拖放后如何更新数据库?
问题描述
在某些情况下,我有三个用于拖放项目的 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>
更新.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);
解决方案
我的第一个注意事项是在命名变量时更加具体,这将帮助您了解问题发生在哪里。例如,这段代码可能有效,但很难阅读:
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 是互斥的。
推荐阅读
- javascript - 如何在 React js 中导出组件以在另一个项目中使用?
- darklang-beta - 如何在 Darklang 中删除个人画布?
- python-3.x - 如何获取数据框中每一行的相关系数
- python - 在python中重新格式化列表
- android - 从另一个小部件 Flutter 更改文本字段的 textSize
- r - 如何映射(匹配)数据框中的列和行?
- python - 如何打印循环用户输入的总和?
- javascript - Konva .to 带有“动态”坐标
- android - 如何在 Flutter 中运行函数和守护进程并在 StatefulWidget 中动态更改状态?
- sql - 从 Firebird 中的单个(单例)选择中分配多个参数?