Javascript 将php脚本的结果放在div中的方法（不带jQuery）

我正在制作一个可以在地图上放置植物的系统。我制作了一支笔，显示用户将看到的内容：缺少实际的地图图像，但你会明白这一点

如果单击其中一个接点

<div id='25' class='specimen size_20' [...] data-species='Agastache mexicana'>a</div>

a

此div将显示在其顶部：

<div id='description'>I should be PHP/mysql generated text!</div>

我应该是PHP/mysql生成的文本！

我想根据工厂的id将数据库中的一些文本放在这个div中。然而，我不确定如何进行这项工作。以下是我的选择：

我可以在屏幕上为每个物种预设一个单独的隐藏描述div 当我生成页面时，将显示地图。如果有人 在地图上使用100+种。不过，它的反应会相当迅速

我可以发出一个ajax请求，javascript使用该请求设置 无论何时激活，description div

你们中的一个有一个更狡猾的计划

这不是一个复制/粘贴解决方案的请求（尽管我不介意），我想了解一下我应该关注的方向，最好有一些例子。我正试图从这个项目中学到尽可能多的东西，这就是为什么如果我自己能做到的话，我不想使用库

---

我希望这不是太罗嗦，我发现很难简明扼要地描述我自己不确定的事情。提前谢谢

我猜当您显示PIN时，您是从某个地方获取的，比如DB或JSON文件

如果是这种情况，可以使用

foreach

指令显示所有管脚

foreach ($pins as $p){
  echo "<div id='25' class='specimen size_20' data-species='Agastache mexicana'>a</div>";
  echo "<div id='description'>Description</div>";
} 

有了这个，我将获得ID属性以将其传递到弹出窗口，这样就可以打开它

我还添加了类

description

，以便在css文件中隐藏它

以下是尝试代码的链接：

那么如何检索数据呢？

---

您可以使用AJAX，然后使用JS数组代替PHP数组。或者您也可以像我一样使用PHP。

我会选择第2个选项：

我可以发出一个ajax请求，javascript在激活描述div时使用该请求设置其内容

如果响应有点慢，您总是可以添加一个加载轮，以便用户知道幕后正在发生什么

---

在这里，选项1也是一种很好的方法，但对于更大的情况，通常伸缩性较差。此外，用户不太可能点击每一个案例（100多个案例），在这种情况下，我更愿意在需要时检索我所需的内容。

这是我问题的答案，基于我从各位优秀人士那里得到的输入

我将忽略description.php文件，它只是从数据库中读取内容并打印一些简单的html

点击其中一个div

<div id='78' class='specimen size_20' style='top:334px; left:577px; background-color:rgba(238,130,238,0.5); border-color:rgba(238,130,238,1);' data-sp_nm='Agastache mexicana' data-sp_id='5'>a</div>

它把文本放进去了

<div id='description' class='description'></div>

---

并使其在正确的位置弹出。我添加了一些额外的代码，以便在单击div之外的某个位置时可以拖动并关闭该div。工作起来很有魅力，但我总是希望得到一些改进或评论。

这实际上可以归结为您的首选项和当前设置。您想减少服务器或客户端上的负载吗？你测试过这两种解决方案吗？在第一个解决方案中，您会引入多少开销？您预计在解决方案#2中会发生多少请求？并且，为了满足第3点的要求，您可以扫描数据库以确定使用最多的种类，并预加载这些种类，其余部分使用AJAX。但是这些都是不成熟的优化和无用的理论，没有任何真正的资源评估。谢谢，这些问题对我很有帮助。我做了一些测试（例如，直接从维基百科获取信息就被排除在外），但这显然是个鸡蛋问题。我会认真做的！问题的关键在于，您的困境是基于性能，而不是功能。您提出的两种基本解决方案都具有相同的可维护性，因为它们都只是读取数据库。但要对性能做出决定，首先需要收集一些实际使用数据。请重新阅读问题。我觉得你不明白这到底是怎么回事。顺便说一下，您仍然在生成重复的ID。我直接从db生成页面。有很多这样的代码，进一步查看OP的codepen，我没有看到任何重复的ID。只有一个元素的id为

description\u id

，该元素仅被重新定位（不能同时显示两个描述），其他所有元素都是数字。所以你实际上在没有ID的地方引入了重复ID。你的目标是什么？所有的方法都是好的。要定义哪一个更好，请尝试定义确切需要的内容。使用我使用的DB-to-PHP-to-Page方法，您不会获得很多交互性。您将需要添加额外的JS代码，以便能够编辑PIN和移动，抱歉，我知道混淆的来源。div的id与物种的id不同。这是我想到的第一种方法的一个简单版本：谢谢，你最后提出的一点确实需要记住。

<div id='78' class='specimen size_20' style='top:334px; left:577px; background-color:rgba(238,130,238,0.5); border-color:rgba(238,130,238,1);' data-sp_nm='Agastache mexicana' data-sp_id='5'>a</div>

function showDescription( event ){
    
    var species = event.target.getAttribute('data-sp_id');
    var popup   = document.getElementById('description');  
    var map     = document.getElementById('bordermap');  
    var rect    = map.getBoundingClientRect();
    var x       = event.clientX - rect.left;
    var y       = event.clientY - rect.top; 
    var descr   = "";
    var xhr     = new XMLHttpRequest();
    var url     = "../ajax/description.php";
    var params  = "id="+species;  
     
    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(params);    
    
    xhr.onload = function() {
        // Do whatever with response
        descr               = xhr.responseText;
        popup.innerHTML     = descr;
        popup.style.display = "block";     
        popup.style.left    = x+"px";            
        popup.style.top     = y+"px";  
    } 
}

<div id='description' class='description'></div>