Question

这是获取json文件的脚本：

$.getJSON(jsonURL, function(json)
    {
        var imgFloorList= "";

        $.each(json.floorTile, function(){
            imgFloorList += '<img src= "' + this.img_src + '">';
        });
        $('.img-container').append(imgFloorList);
    })

我想在json文件中获取一个图像并将其放在div img-container中。我应该怎么做才能获得一张图像，而不是我在json文件中的所有图像？

Answer 1

以下是一个完整的示例，您可以查看我是如何完成此操作并相应更改解决方案

<强>控制器：

public class TestController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetProducts()
    {
        var p1 = new Product { name = "fruit", img_src = "http://kingofwallpapers.com/fruit/fruit-005.jpg" };
        var p2 = new Product { name = "vegetables", img_src = "http://blogs.extension.iastate.edu/foodsavings/files/2014/06/vegetables-variety.jpg" };
        return Json(new List<Product> { p1, p2 }, JsonRequestBehavior.AllowGet);
    }
}

public class Product
{
    public string name { get; set; }
    public string img_src { get; set; }
}

查看：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> <script type="text/javascript"> $(function () { debugger; var jsonURL = '@Url.Action("GetProducts","Test")'; $.getJSON(jsonURL, function (data) { var img = '<img src="' + data[0].img_src + '" style="width:100px;height:100px;">'; $(".img-container").append(img); }); }); </script> <div class="img-container"> </div>

如何逐个获取json数据

1 个答案: