Question

所以基本上我要做的是在外部JSON文件中有一堆数据。此JSON文件可以由授权人员随时编辑，因此数据的数量将不断变化。因此，使用该文件中的数据，我需要动态创建div，以便我拥有的div数量将与JSON文件中的数据量相匹配。在div中，将显示JSON数据。我已经完成了我的研究，我发现它可以通过Jquery和Ajax完成，但我找不到与我的情况相似的东西。请原谅，因为在网络开发方面我是个新手

如果div是硬编码的话，这就是div。

<div class="container" id="TestCi">
<h3>Files</h3>
<div class="row">
  <div class="col-md-102 col-sm-12">

    <div class="col-md-4 col-sm-4">
      <div class="well">
        <h5>3G</h5>
         <a href="https://example.com" target="_blank"><img data-toggle="tooltip" data-placement="left" title="Click to open data" src="images/3GQoS.jpg" height="100%" width="100%"/> </a>
      </div>
    </div>

    <div class="col-md-4 col-sm-4">
      <div class="well">
        <h5>4G</h5>
        <a href="https://example.com" target="_blank"><img data-toggle="tooltip" data-placement="left" title="Click to open data" src="images/4GQoS.jpg" height="100%" width="100%"/></a>            
      </div>
    </div>

  <div class="col-md-4 col-sm-4">
    <div class="well">
      <h5>Lorem Ipsum</h5>
      <p>Integer eget tortor justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Ut enim ad minim veniam, quis nostrud exercitation.</p>
    </div>
  </div>

这是我的JSON文件

[{"title":"3G","filePath":"https://example.com","imagePath":"images/3GQoS.jpg"}, {"title":"4G", "filePath":"https://example.com", "imagePath":"images/4GQoS.jpg"} ]

编辑：我需要读取外部JSON文件中的每个项目，并且每个项目都会创建一个div，数据将显示在其中。以下是div的外观图像：Image

Answer 1

首先需要deserialize您的JSON文件。在那之后，你遍历每个obj，并构建div。然后，您只需.prepend()进入目标div

var JsonData = '[{"title":"3G","filePath":"https://example.com","imagePath":"images/3GQoS.jpg"}, {"title":"4G", "filePath":"https://example.com", "imagePath":"images/4GQoS.jpg"} ]';

var obj = JSON.parse( JsonData );

var tmp = '';
$.each( obj, function( key, value ) {
  tmp += '<div class="col-md-4 col-sm-4">';
  tmp += '    <div class="well">';
  tmp += '      <h5>' + value.title + '</h5>';
  tmp += '      <a href="' + value.filePath + '" target="_blank"><img data-toggle="tooltip" data-placement="left" title="Click to open data" src="' + value.imagePath + '" height="100%" width="100%"/></a>    ';        
  tmp += '    </div>';
  tmp += '  </div>';
});

$('#main').prepend(tmp);

演示：https://jsfiddle.net/vd2jaxtr/

Answer 2

你可以试试这个。

$.ajax({
    url : "url",
    type : "GET or POST", // whichever you like
    contentType:"application/json",
    success : function(list)
    {           
        var divCol  = "<div class='col-sm-4 col-md-4'>";
        var divWell = "<div class='well'>";
        var divClose= "</div>";

        list.forEach(function(obj, index) {

            var title     = "<h5>"      + obj.title    + "</h5>";
            var linkStart = "<a href='" + obj.filePath + "' target='_blank'>";
            var image     = "<img data-toggle='tooltip' data-placement='left' title='Click to open data' src='" + obj.imagePath + "' height='100%' width='100%'/>"
            var linkEnd   = "</a>";

            var div = divCol    +
                        divWell     +
                            title       +
                            linkStart       +
                            image       +
                            linkEnd +
                        divClose +
                      divClose;

            $('.col-sm-12').append(div); // insert the div you've just created

        })
    }
});

使用带有JSON数据的Jquery动态创建div

2 个答案: