Question

在PHP中，我们可以浏览一系列对象或数据，并在生成HTML时生成HTML。例如：

<?php foreach ($array as $entity)?>
<div class = "feeds">
   <h1><?php $entity['title']?></h1>
   <p><?php $entity['overview']?></p>
   <a href=""<?php $entity['link']?>"">Read More</a>
</div>

现在，我有一个页面，我将使用jquery调用.php文件，这将返回一个大的JSON回复。 JSON的回复是这样的：

[
  {
    "created_at": "Sat Nov 07 16:50:09 +0000 2015",
    "user_name": "Entertainment Weekly",
    "text": "Stephen Colbert conjures up fake #HarryPotter spoilers on   #TheLateShow: https://t.co/vA9IA3NXUA https://t.co/PIcyseXXNq",

  },
  {
    "created_at": ".......",
    "user_name": ".........",
    "text": "..............",

  },
  ...
]

现在我想使用jquery将此回复转换为html内容的div。对此的任何帮助都非常感谢。

Answer 1

这样的事情：

for (var i=0; i<=array.length; i++) {
     var html = '<h1>' + array[i].title + '</h1><p>' + array[i].overview + '</p><a href=""' + array[i].link + '"">Read More</a>';

     $('.feeds').append(html);
}

Answer 2

首先，我会使用Angular或其他平台。也就是说，在jQuery中，我从文档中的目标div开始，如下所示：

<div id="feedsList"></div>

然后你需要以json格式获取数据。看起来奇怪的命令，以＆＃34;。＆＃34;开头。只是添加到前一个元素。

$(document).ready(function(){

    var data = [
        {
            title: "title 1",
            overview: "overview 1",
            link: "http://www.stackoverflow.com"
        },
        {
            title: "title 2",
            overview: "overview 2",
            link: "http://www.disney.com"
        },
        {
            title: "title 3",
            overview: "overview 3",
            link: "http://www.angular.com"
        }
    ];

    var wrapper_class = "feeds",
        title_class = "feed_title",
        overview_class = "feed_overview",
        link_class = "read_more",
        feedsList = $('#feedsList');


    data.forEach(function(feeds) {
        $("<div>")
            .addClass(wrapper_class)
            .append(
                $("<h3>")
                    .addClass(title_class)
                    .html(feeds.title)
            )
            .append(
                $("<p>")
                    .addClass(overview_class)
                    .html(feeds.overview)
            )
            .append(
                $("<a>")
                    .attr("target","_blank")
                    .attr("href",feeds.link)
                    .addClass(link_class)
                    .html("read more...")
            )
            .appendTo(feedsList);
    });
});

这是一个小提琴手： https://jsfiddle.net/mckinleymedia/mdd09vf9/

~~哦，我把你的h1s变成了h3s，因为你的页面上只有一个h1。~~

希望这有帮助。

Answer 3

var data = [{
  "h1": "qwe",
  "para": "12312312312312312312321",
  "anchor": "google.com"
}]
console.log(data)
$.each(data, function(index,value) {
$('h1').text(value.h1);
$('p').text(value.para);
$('a').text(value.anchor);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="feeds">
  <h1></h1>
  <p></p>
  <a href="">Read More</a>
</div>

尝试这样的事情

使用jquery使用来自JSON回复的数据填充div

3 个答案: