一、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
时间： 2024-11-05 11:40:04