Javascript 从数据库获取Ajax数据

我正在尝试构建一个系统，在这个系统中，我首先使用javascript检查数据库中的一个表，如果布尔列“take”中的任何行为false，它将加载该行，然后将其加载到html中

然后用户可以拖放图像，它将使用AJAX将布尔值更改为false

到目前为止，我已经完成了下半场。避孕药当前只是html中的一个图像，它具有拖放功能，如果它被拖放到某个div上，它当前只是将id为24的行更改为false（只是用于测试的随机列）

这一切都是可行的，但我需要它来获取假行并创建它们，然后使用它们的id号将它们设置为假（如果拖放）。我不知道该怎么做。 到目前为止，我的代码是：

action.js

function doFirst(){
init();

function dropped(e){
    e.preventDefault();
    var r=confirm("Are you sure you want to take this pill?");
    if (r == true)
    {
        //pressed ok do database stuff
        mypic.style.visibility = 'hidden';
    leftbox.style.border = '3px solid white';
        var pillid=24;
        data = "pillid="+pillid
        $.post('js/filetoupdate.php', data, function(data) {
            //Here you can get the output from PHP file which is (data) here
        });
    }
    else
    {
        //return pill to clock
    }


}
window.addEventListener("load", doFirst, false);


function init() {
}
?>

html文件

<div id="appframe">
  <div id="addbutton"><a href="medicineinput.php"><img src="images/addbutton.png" alt="add new medication image"/></a></div>
  <div id="message1"><h2>Todays medication</h2></div>
  <div id="message2"><h3>Drag and drop to take medication</h3></div>
  <div id="mouth"><img src="images/mouth.png" alt="mouth image"/></div>
  <div id="clock"><img src="images/clock/pill.png" alt="pill image" id="pillpic"/></div>
</div>

今天的药物治疗
拖放以服用药物

另外，我对php、javascript和ajax非常陌生，我建议将您的示例代码缩减为与您的问题相关的特定代码-这里有很多格式不好、不相关的代码供我们阅读…我决定全部添加，以便您能够了解问题的背景？因为我不确定是否要以我想要的方式（通过获取数据）加载图像，是否应该像现在这样？好吧，你的问题是关于一个Ajax调用-所以摆脱所有的拖拽，删除和图像处理代码，留下你的Ajax调用。我甚至还没有Ajax调用，因为我不知道如何实现它，但我可以尝试去掉多余的代码。