views.py
1 from django.shortcuts import render,HttpResponse 2 from app01 import models 3 import json 4 # Create your views here. 5 def index(req): 6 if req.method == 'POST': 7 dic = models.Upload.objects.filter(status=1).values('img1','name','info') 8 dic = list(dic) 9 dic = json.dumps(dic) 10 print(dic) 11 return HttpResponse(dic) 12 return render(req, 'index.html')
url.py
1 from django.conf.urls import url 2 from django.contrib import admin 3 from app01 import views 4 urlpatterns = [ 5 url(r'^admin/', admin.site.urls), 6 url(r'^index/', views.index), 7 ]
index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .clearfix:after{ 8 content: '.'; 9 visibility: hidden; 10 height: 0; 11 clear: both; 12 display: block; 13 } 14 img{ 15 width: 245px; 16 height: 200px; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="container" style="margin: 0 auto; 980px;" class="clearfix"> 22 23 <div style=" 245px;float: left"> 24 25 </div> 26 27 <div style=" 245px;float: left"> 28 29 </div> 30 31 <div style=" 245px;float: left"> 32 33 34 </div> 35 36 <div style=" 245px;float: left"> 37 38 39 </div> 40 </div> 41 <script src="/static/js/jquery-2.1.4.min.js"></script> 42 <script> 43 $(function () { 44 $.ajax({ 45 url:'/index/', 46 type:'POST', 47 dataType:'json', 48 success:function (arg) { 49 $.each(arg, function (k, v) { 50 console.log(k,v); 51 k = k + 1; 52 var div = document.createElement('div'); 53 div.className = 'c1'; 54 var img = document.createElement('img'); 55 img.src = "/" + v.img1; 56 var p = document.createElement('p'); 57 p.innerText = v.info; 58 div.appendChild(img); 59 div.appendChild(p); 60 if (k % 4 == 1) { 61 $('#container').children(':eq(0)').append(div); 62 } else if (k % 4 == 2) { 63 $('#container').children(':eq(1)').append(div); 64 } else if (k % 4 == 3) { 65 $('#container').children(':eq(2)').append(div); 66 } else if (k % 4 == 0) { 67 $('#container').children(':eq(3)').append(div); 68 } else { 69 70 } 71 }) 72 } 73 }) 74 }) 75 76 77 </script> 78 </body> 79 </html>