【N01】如何一张一张显示从数据库中查询到的图片

经过两个月的激情奋战，我终于结束了自己的项目任务。

点击右端的缴费截图按钮，就可以弹出对应学生所有的缴费截图功能，这是如何显示的呢？首先我在DIV布局上，先设置了一个大的DIV，ID是MAIN，然后将从后端查询来的代码使用FOR循环，在MAIN中添加一串HTML语言，循环一次就根据审核状态判断应该生成什么样的HTML语言，增加一个DIV框，里面有一张图片和两段文字，设定它们的宽度为25%,这样的话，随着我们页面的拉伸，一行始终都会显示四张图片。

代码如下：

$(document).ready(function () {
            //获得图片--王闯--2019年3月26日-15点32分
            selectAllPicture();

        });

        //获得图片--王闯--2019年3月26日-15点32分
        function selectAllPicture() {
            $.ajax({
                type: "get",
                url: layui.cache.manage + "NO1/V1/PrintScreen/GetPicture",
                //data: { ID: 123 },
                //<div id="" class="main1"><img src= "http://192.168.22.78/group1/M00/00/28/wKgWTlyU0VeAYVWrAAFebENpM9k54..jpg"
                //实际运行
                data: { ID: stuID },
                contentype: 'application/json',
                success: function (data) {

                    var a = "<div id=\""

                    var a1 = "\" class=\"main1\"><div id='tempPicture'><input class='btnDeletePicture' type='button' value='×' title='点击删除'onclick='deletepictureID(\"";
                    var a2 = "\")'/> </div> <img src=\"";
                    var a3 = "\" class=\"main1\"><img src=\"";

                    var b = "\"class=\"img1\"onclick=\" getpictureID('";
                    var b1 = "'); document.getElementById('light').style.display = 'block'; document.getElementById('fade').style.display = 'block'; document.getElementById('pic1').src = '";
                    var c = "';document.getElementById('label1').innerHTML='";
                    var d = "';document.getElementById('label2').innerHTML=getnoNull('";

                    var e = "')\"/><br />";
                    var e1 = "';document.getElementById(label1).stytle.color = \"red\"\"/><br />";
                    var e2 = "';document.getElementById(label1).stytle.color = \"blue\"\"/><br />";
                    var e3 = "';document.getElementById(label1).stytle.color = \"green\"\"/><br />";

                    var f1 = "<p class=\"check\">";
                    var f2 = "<p class=\"pass\">";
                    var f3 = "<p class=\"fail\">";

                    var g = "</p><p class=\"name\">";
                    var h = "</p></div >"
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].check_State == 0) {

                            $('#main').append(a + data[i].id + a1 + data[i].id + a2 + data[i].contract_Url + b + data[i].contract_Url + c + getchinese(data[i].check_State) + d + data[i].remark + e1 + f1 + getchinese(data[i].check_State) + g + data[i].screen_Name + h);
                        }
                        else if (data[i].check_State == 1) {
                            $('#main').append(a + data[i].id + a3 + data[i].contract_Url + b + data[i].contract_Url + c + getchinese(data[i].check_State) + d + data[i].remark + e2 + f2 + getchinese(data[i].check_State) + g + data[i].screen_Name + h);
                        }
                        else {
                            $('#main').append(a + data[i].id + a3 + data[i].contract_Url + b + data[i].id + b1 + data[i].contract_Url + c + getchinese(data[i].check_State) + d + data[i].remark + e + f3 + getchinese(data[i].check_State) + g + data[i].screen_Name + h);
                        }
                        //""http://192.168.22.78/group1/M00/00/28/wKgWTlyU0VeAYVWrAAFebENpM9k54..jpg""(未通过图片地址)
                    }
                }
            });
        }

代码写的很繁琐，这是我需要改进的，我还在生成图片的时候，把将来要用到的一些属性绑定在了点击事件中，这样就会方便之后的操作。至于后端代码，比较简单，就没有必要和大家分享了。