jQuery数据结构渲染（1）：图片数组的渲染

作为一个前端开发，在日常工作中，会不断的请求接口，调用接口，再对接口的数据进行一定的处理，渲染在前端界面，尤其是在今天前后端分离的时代，这项技能是每个前端开发必备~

这里就简单的记录工作之中遇到的一些常见的对数据处理的方法，今天要说的是遇到了数组格式的图片的时候，该怎么处理。

data.json:

{
    "pics": ["img/p15.png", "img/p16.png","img/p17.png"]
}

代码示例：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>jQuery数据处理（1）：图片数组的渲染</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="pics"></div>
    </body>
    <script type="text/javascript">
            $.ajax({
                url: "data.json",
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    //图片数组的渲染
                    var srcHtml = '';
                    $.each(data.pics, function(i, item) {
                        srcHtml += '<img src="' + item + '"/>';
                    })
                    $(".pics").html(srcHtml)
                }
            });
    </script>
</html>

好的，打开浏览器，效果如下。