标签:library set .ajax com shortcut frame post author 图片显示
一、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
标签:library set .ajax com shortcut frame post author 图片显示
原文地址:http://www.cnblogs.com/wudalang/p/5984977.html