django-jsonp 瀑布流 组合搜索 多级评论
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了django-jsonp 瀑布流 组合搜索 多级评论相关的知识,希望对你有一定的参考价值。
一、JSONP
jsonp 原理:
1.浏览器同源策略
通过Ajax,如果在当前域名去访问其他域名时,浏览器会出现同源策略,从而阻止请求的返回
2.img,script,link,iframe - 不鸟同源策略
src属性的标签,一般不鸟同源策略
3.JSONP
利用 不鸟同源策略 的标签,发送跨域Ajax请求, <script>标签
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>Index</h1> <input type="button" onclick="Ajax();" value="普通AJax"/> <input type="button" onclick="Ajax2();" value="跨域普通AJax"/> <input type="button" onclick="Ajax3();" value="跨域牛逼AJax"/> <input type="button" onclick="Ajax4();" value="江西TV"/> <script src="/static/jquery-2.1.4.min.js"></script> <script> function Ajax(){ $.ajax({ url: ‘/get_data/‘, type: ‘POST‘, data: {‘k1‘: ‘v1‘}, success: function (arg) { alert(arg); } }) } function Ajax2(){ $.ajax({ url: ‘http://wupeiqi.com:8001/api/‘, type: ‘GET‘, data: {‘k1‘: ‘v1‘}, success: function (arg) { alert(arg); } }) } function Ajax3(){ // script // alert(api) var tag = document.createElement(‘script‘); tag.src = ‘http://wupeiqi.com:8001/api/‘; document.head.appendChild(tag); document.head.removeChild(tag); } function fafafa(arg){ console.log(arg); } function Ajax4(){ // script // alert(api) var tag = document.createElement(‘script‘); tag.src = ‘http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403‘; document.head.appendChild(tag); document.head.removeChild(tag); } function list(arg){ console.log(arg); } </script> </body> </html>
viwes.py
from django.shortcuts import render,HttpResponse # Create your views here. def index(request): return render(request,‘index.html‘)
二 、图片显示瀑布流
xx.py #查看余数
# Author:Alex Li from django import template from django.utils.safestring import mark_safe from django.template.base import resolve_variable, Node, TemplateSyntaxError register = template.Library() @register.filter def detail1(value,arg): """ 查看余数是否等于remainder arg="1,2" :param counter: :param allcount: :param remainder: :return: """ allcount, remainder = arg.split(‘,‘) allcount = int(allcount) remainder = int(remainder) if value%allcount == remainder: return True return False
student.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .container{ width: 980px; margin: 0 auto; } .container .column{ float: left; width: 245px; } .container .item img{ width: 245px; } </style> </head> <body> $(‘.container‘).eq(1).appned() <div class="container"> <div class="column"> </div> <div class="column"> </div> <div class="column"> </div> <div class="column"> </div> </div> img_list = [ {‘src‘: ‘1.jpg‘, ‘title‘: ‘asdfasdfasdf‘,‘content‘: ‘asdf‘},# 1 {‘src‘: ‘2.jpg‘, ‘title‘: ‘asdfasdfasdf‘,‘content‘: ‘asdf‘},# 2 {‘src‘: ‘3.jpg‘, ‘title‘: ‘asdfasdfasdf‘,‘content‘: ‘asdf‘}, {‘src‘: ‘4.jpg‘, ‘title‘: ‘asdfasdfasdf‘,‘content‘: ‘asdf‘}, {‘src‘: ‘18.jpg‘, ‘title‘: ‘asdfasdfasdf‘,‘content‘: ‘asdf‘},# 5 {‘src‘: ‘21.jpg‘, ‘title‘: ‘asdfasdfasdf‘,‘content‘: ‘asdf‘}, ] 1, </body> </html>
views.py
from django.shortcuts import render # Create your views here. def student(request): img_list = [ {‘src‘: ‘1.jpg‘, ‘title‘: ‘asdfasdfasdf‘,‘content‘: ‘asdf‘},# 1 {‘src‘: ‘2.jpg‘, ‘title‘: ‘asdfasdfasdf‘,‘content‘: ‘asdf‘},# 2 {‘src‘: ‘3.jpg‘, ‘title‘: ‘asdfasdfasdf‘,‘content‘: ‘asdf‘}, {‘src‘: ‘4.jpg‘, ‘title‘: ‘asdfasdfasdf‘,‘content‘: ‘asdf‘}, {‘src‘: ‘18.jpg‘, ‘title‘: ‘asdfasdfasdf‘,‘content‘: ‘asdf‘},# 5 {‘src‘: ‘21.jpg‘, ‘title‘: ‘asdfasdfasdf‘,‘content‘: ‘asdf‘}, ] return render(request, ‘student.html‘, {"img_list":img_list})
3
以上是关于django-jsonp 瀑布流 组合搜索 多级评论的主要内容,如果未能解决你的问题,请参考以下文章
网页设计之瀑布流,排列图片img最好的方式之一代码+注释=很详细!!!