根据一个 json 结果生成单独的 html答案

【问题标题】：generate seperated html based on one json result根据一个 json 结果生成单独的 html
【发布时间】：2018-09-12 05:57:46
【问题描述】：

请看下面的html

<div id="sidebar">
<div id="box1"></div>

<div class="ads"></div>

<div id="box2"></div>

<div class="ads"></div>

<div id="box3"></div>

</div>

如您所见，有一些盒子每两个盒子之间有一个带有类广告的div

我需要用图片列表填充这些广告

我使用以下操作将图像列表作为 json 返回

[HttpPost]
    public JsonResult LoadAds()
    {
        var adsList = Advertise.GetAdvertise().Select(a => new
        {
            Id = a.Id,
            img = a.img                           
        });
        return Json(adsList, JsonRequestBehavior.AllowGet);
    }

这是我的 ajax 代码

$(document).ready(function () {
function showAds() {              
                var url = '/Home/LoadAds';
                $.ajax({
                    type: "POST",
                    contentType: 'application/json; charset=utf-8',
                    dataType: "json",
                    url: url,
                    success: function (response) {

                          $.each(response, function (index, item) {
                                var htmlcontnet = "";
                                //Need to populate adds here
                            });
                        }
                    },
                    failure: function (msg) {

                    }
                });
            }
        });

如何在成功函数中生成正确的 html？

【问题讨论】：

是原始代码中的拼写错误还是您创建此问题时的拼写错误。您在var url = '/Home/LoadAds; 中缺少'
数组中的每个项目是如何连接到每个广告 div 的？是否总是有与广告 div 相同数量的项目？如果是，则从数组中读取并在循环内一一添加到div中。
@Shyju 第一个 json 项必须替换为第一个广告 div，第二个替换为第二个，第三个替换为第三个，依此类推...
@CodeThing 打错了，我只是创建一个简单的例子，真实的代码不同
@lilifarabari 你能告诉我们你的示例 json 吗？

标签： jquery json asp.net-mvc

【解决方案1】：

考虑到这是你的 json response = {0:"This is Add 1", 1:"This is Add 2"}

成功处理程序中的代码应该是这样的。

$.each(response, function (index, item) {
  var htmlcontnet = "";
  $('.ads').eq(index).html(item);
});

【讨论】：

【解决方案2】：

最好动态创建替代 div，因为您可以添加任意数量的广告图片，具体取决于可用性

$(function(){
  showAds();
});

function showAds() {
  var url = '/Home/LoadAds';
  
  // uncomment this line with your orginal url
  //$.get(url, function(response) {
  
  //remove this hardcoded json response
  var response = [{
    Id: 1,
    img: 'https://image.flaticon.com/icons/png/128/1078/1078005.png'
  }, {
    Id: 2,
    img: 'https://image.flaticon.com/icons/png/128/1078/1078006.png'
  }];
  var imgIndx = 0;
  $(".box").each(function() {
    if (response.length > imgIndx) {
      $(this).after($('<div class="ads"><img src="' + response[imgIndx].img + '" /></div>'));
    }
    imgIndx++;

  });
  //});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【讨论】：