获取json数据并使用我的Popup中的jquery在div中显示

时间:2012-02-07 12:05:23

标签: jquery

在我的按钮中单击我有一个弹出式div,在里面我需要以json格式显示数据返回的div

      <a href='somelink' title='hello'class='details' rel='id'>h1</a>

我的弹出式div如下

<div id="popupdiv">
</div>

    <script type="text/javascript">
    $(".details").live("click", function () {
     var id = $(this).attr("rel");

    $('#popupdiv').modal();
    $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",

            url: "/mycontroller/details?Id="+ id,
            data: "",
            dataType: "json",
            success: function (data) { //which contains name,email etc how can i append the  details on to the "popupdiv" div by inserting in to another div

            }
    });
    return false;                     
     });
     </script>

4 个答案:

答案 0 :(得分:2)

success: function (data) {
  $("<div>").appendTo("#popupdiv").append(data.name);
}

答案 1 :(得分:1)

您之前使用过tmpl吗?

我会使用tmpl将内容呈现到div中。

首先创建一个模板

<script id="messageTemplate" type="text/x-jquery-tmpl">
<span>${Message}</span>
</script>

然后在success函数中将模板呈现给div。

    $("#popupdiv").empty();
    $("#messageTemplate").tmpl(results).appendTo("#popupdiv");

然后执行$(“#popupdiv”)。dialog()。

答案 2 :(得分:1)

您可以使用$.ajax的{​​{3}}快捷方式dataType:json,如下所示:

$.getJSON(url: "/mycontroller/details?Id=" + id, function(data) {
    var names = [];
    var emails = [];
    for (var i = 0, result = data; i < result.length; i++) {
       names.push(result[i].name);
       emails.push(result[i].email);
    }

    $('#popupdiv').html(names.join('') + '<br />' + email.join(''));
});

答案 3 :(得分:0)

只需将返回的数据附加到您用作模态的div。以下是“名称”的示例:

success: function (data) { 
    $('#popupdiv').append(data.name);
}

如果你想在#popupdiv中使用div,请使用

success: function (data) { 
    $('#popupdiv').append('<div id="innerPopupDiv"></div>');
    $('#innerPopupDiv').append(data.name);
}

http://jqapi.com/#p=append

请注意,我猜测了你的JSON是什么样的。