瀑布流第二种方式————基于ajax方式
生活随笔
收集整理的這篇文章主要介紹了
瀑布流第二种方式————基于ajax方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第二種瀑布流是基于ajax方式工作的。與之前一種形式相比，這種方式可以向后臺發送數據，
同時，ajax可以根據數據，每次只取一部分的數據，等滾輪劃到底部時，再出發ajax，然后又去一次
?
?
models文件
class Img(models.Model):src = models.FileField(max_length=32,verbose_name='圖片路徑',upload_to='static/upload')title = models.CharField(max_length=16,verbose_name='標題')summary = models.CharField(max_length=128,verbose_name='簡介')class Meta:verbose_name_plural = '圖片表'def __str__(self):return self.title?
?
?
?
url文件
from django.contrib import admin from django.urls import path from app01 import viewsurlpatterns = [path('admin/', admin.site.urls),path('img.html/', views.img),path('get_img.html/', views.get_img), ]?
?
views文件
from django.shortcuts import render,HttpResponse from django.http import JsonResponse from app01 import models def img(request):return render(request,'img.html')def get_img(request):import jsonnid = request.GET.get('nid')img_list = models.Img.objects.filter(id_gt = nid).values('id','src','title') #獲取數據庫的中數據img_list = list(img_list)ret = {'status':True,'data':img_list}# return HttpResponse(json.dumps(ret))return JsonResponse(ret)?
?
html文件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.w{width: 1000px;margin: 0 auto;}.item{width: 25%;float: left;}.item img{width: 100%;}</style> </head> <body><div>風景圖片</div> <div class="w"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div><script src="/static/jquery-3.3.1.js"></script><script>$(function () {initImg()})NID=0{# 設置NID為全局變量，第一次ajax發送時是0.這時ajax只會從數據庫取一部分數據，等滾輪劃到底部，再出發ajax,再繼續取值#}function initImg() {$.ajax({url:'/get_img.html',type:'GET',data:{'nid':NID},dataType:'JSON',success:function (arg) {var img_list = arg.data$.each(img_list,function (index,v) {var eqv = index % 4; {# index是循環的索引，v是去到的值（字典形式的）#}var tag = document.createElement('img'){#創建一個img標簽，標簽的地址是'/'+v.src，然后將標簽添加到對應的子標簽#}tag.src='/'+v.src$('.w').children().eq(eqv).append(tag)})}})}{# 下面可以監聽鼠標滾輪動作，當滾輪到最底部時，繼續出發get_img函數，然后到數據庫中再取一次 #}</script></body> </html>?
轉載于:https://www.cnblogs.com/lhqlhq/p/9210082.html
總結
以上是生活随笔為你收集整理的瀑布流第二种方式————基于ajax方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 辅助模式最终考验的是想象力，先来看看怎么
- 下一篇： 几种开发时安全验证的实现