Javascript 事件 - 将值发送到数据库

Question

我无法将数据发送到数据库。正在发送这些值，但它们都将进入第一个放置区字段。我需要每个 dropzone 值进入数据库中的正确字段。

我尝试在 javascript 中添加不同的侦听器和 if 语句，但它对我不起作用。

html:

<ul id="images">
<li><a id="img1" draggable="true"><img src="images/1.jpg"></a></li>
<li><a id="img2" draggable="true"><img src="images/2.jpg"></a></li>
<li><a id="img3" draggable="true"><img src="images/3.jpg"></a></li>
</ul>

//dropzones


<div class="drop_zones">
<div class="drop_zone" id="drop_zone1" droppable="true">
</div>

<div class="drop_zone" id="drop_zone2"  droppable="true">
</div>

<div class="drop_zone" id="drop_zone3" droppable="true">
</div>
</div>

   <button id = "post" onClick="postdb();">Post info</button>

javascript：

var addEvent = (function () {
    if (document.addEventListener) {
        return function (el, type, fn) {
            if (el && el.nodeName || el === window) {
                el.addEventListener(type, fn, false);
            } else if (el && el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            }
        };
    } else {
        return function (el, type, fn) {
            if (el && el.nodeName || el === window) {
                el.attachEvent('on' + type, function () {
                    return fn.call(el, window.event);
                });
            } else if (el && el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            }
        };
    }
})();

var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');

function cancel(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }
    return false;
}

function updateDataTransfer() {
    dragItems = document.querySelectorAll('[draggable=true]');
    for (var i = 0; i < dragItems.length; i++) {
        addEvent(dragItems[i], 'dragstart', function (event) {
            event.dataTransfer.setData('obj_id', this.id);
            return false;
        });
    }
}

addEvent(dropAreas, 'dragover', function (event) {
    if (event.preventDefault)
        event.preventDefault();

    this.style.borderColor = "#000";
    return false;
});

addEvent(dropAreas, 'dragleave', function (event) {
    if (event.preventDefault)
        event.preventDefault();

    this.style.borderColor = "#ccc";
    return false;
});

addEvent(dropAreas, 'dragenter', cancel);

// drop event handler
addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault)
        event.preventDefault();

    // get dropped object
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);

    // get its image src
    var oldSrc = oldObj.childNodes[0].src;
    oldObj.className += 'hidden';

    var oldThis = this;

    setTimeout(function () {
        oldObj.parentNode.removeChild(oldObj); // remove object from DOM

        // add similar object in another place
        oldThis.innerHTML += '<a id="' + iObj + '" draggable="true"><img src="' + oldSrc + '" />      </a>';

        // and update event handlers
        updateDataTransfer();


function postdb(){

if (document.querySelectorAll('[droppable=true]')){


     var dropDetails = oldThis.id + '=' + iObj;


     $.post("a-2.php", dropDetails);
   }


        oldThis.style.borderColor = "#ccc";
    }, 500);

    return false;
});

和我的 php：

 $sql="INSERT INTO table_answers (drop_zone1, drop_zone2, drop_zone3) VALUES         ('$_POST[drop_zone1]','$_POST[drop_zone2]','$_POST[drop_zone3]')";

有什么想法吗？

Answer 1

var u = $('drop_zone1'); 
if(u){ 
  $.post("post.php", y); 
}; 

（我假设这是 jQuery。）

1. 将# 添加到选择器的开头：$('#drop_zone1');。

2. jQuery 结果集的计算结果始终为真值。我不清楚您要在这里验证什么条件...

3. 在 PHP 代码中，您将在第一个 if 中的 $sql2 中创建查询，而不是在其他两个 $sql 中创建查询。

---

编辑 - 现在我们知道您在 setTimeout 中尝试做什么，这个简化的函数应该可以工作：

setTimeout(function() {
    oldObj.parentNode.removeChild(oldObj); // remove object from DOM

    // add similar object in another place
    oldThis.innerHTML += '<a id="' + iObj + '" draggable="true"><img src="' + oldSrc + '" />      </a>';

    // and update event handlers
    updateDataTransfer();
/*
    this part has been removed, see edit below
    var dropDetails = oldThis.id + '=' + iObj;
    // now dropDetails should look something like "drop_zone1=img1"

    $.post("post.php", dropDetails);
*/
    oldThis.style.borderColor = "#ccc";
}, 500);

---

再一次编辑，一次提交所有被删除的元素：

function postdb() {
  var postDetails = {};
  var dropZones = document.querySelectorAll('[droppable=true]');
  var allZonesDropped = true;
  for(var ix = 0; ix < dropZones.length; ++ix) {
    var zone = dropZones[ix];
    var dropped = zone.querySelector('[draggable=true]');
    if(dropped) {
      var dropTag = dropped.id;
      postDetails[zone.id] = dropTag;
    } else {
      allZonesDropped = false;
    }
  }
  if(allZonesDropped) {
    $.post("a-2.php", dropDetails);
  } else {
    alert('Not all targets have elements in them');
  }
  return false;
});

请注意放置此函数的位置 - 您编辑的问题在 setTimeout 调用的中间有它，它肯定不会起作用。

---

关于您的 PHP 代码：您应该真的了解 PDO 或 MySQLi 并使用准备好的语句，而不是盲目地将用户输入插入到查询中。如果你想学习，here is a quite good PDO-related tutorial。