javascript - 从ajax获取数据并将其传递到弹出窗口

Question

我有一个 div 弹出窗口，并且有一些链接显示此弹出窗口。 问题在于，弹出窗口的内容会根据用户点击链接的不同而有所不同:

//my div popup
<div id="show-popup">
    <p>$value</p>
</div>

//one,two and three values fetch from database by using Ajax.
<a href="#show-popup" onclick="toGetValues(1)">show popup = the value must be one</a>
<a href="#show-popup" onclick="toGetValues(2)">show popup = the value must be two</a>
<a href="#show-popup" onclick="toGetValues(3)">show popup = the value must be three</a>

现在，我不知道如何通过 Ajax 将 1,2,3 发送到数据库，然后如何在从数据库获取值后打开该弹出窗口。

我知道通过下面的方法我可以向我的网址发送一些值，但如何打开弹出窗口，然后在此弹出窗口上加载新值？

$.post('myurl' , {id:id} , function(data){
    //do stuf
})

Answer 1

使用.html();如果在点击之前未显示元素，则将.show()链接到.html()。

要附加 data 而不是替换 #show-popup 处的现有 data，请替换 .append()对于 .html()

function toGetValues(id) {
  $.post("myurl", {id:id}, function(data) {
      // do stuff
      // `.html()` replaces `html` of `#show-popup`
      $("#show-popup").append("<p>$" + data + "</p>")
      // .show()
   })
}