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()到click。

要追加data而不是替换data处的现有#show-popup，请将.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()
   })
}

Answer 2

你也可以尝试这个

function toGetValues(myvar)
{
    $.ajax({
        url: "test.php",
        type: "post",
        data: {mypar: myvar},
        success: function (response) {
           $( "#show-popup").html(response);
           $( "#show-popup").dialog();
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });    
}

Answer 3

$.get( "url", {id: id} ).done(
  function( data ) {
    $("#show-popup").append("<p>" + data + "</p>");
});

Answer 4

您将从刚刚发送的onclick事件中获取id，并使用value将您从PHP页面回复的p放回段落text() ：

function toGetValues(id) 
{
  $.post("myurl", {id:id}, function(value) {
      $("#show-popup p").text(value); //append returned value from php to the  paragraph
      $("#show-popup").dialog(); //Show popup
   })
}

从ajax获取数据并将其传递给弹出窗口

4 个答案: