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

A)如何提供每个DIV的总和-现在,无论将元素放入哪个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);

最佳答案

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

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变量。

现在,我可以使用点符号引用它的对象结构了。因此,要从上下文对象中提取金额,我可以像这样引用它:

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 - 拖放后如何使用javascript/ajax更新数据库?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51900515/

10-09 21:43
查看更多