django-jsonp 瀑布流组合搜索多级评论

一、JSONP

jsonp 原理：

　　1.浏览器同源策略
通过Ajax，如果在当前域名去访问其他域名时，浏览器会出现同源策略，从而阻止请求的返回

　　 2.img,script,link,iframe - 不鸟同源策略
       src属性的标签，一般不鸟同源策略
       3.JSONP
       利用不鸟同源策略的标签，发送跨域Ajax请求， <script>标签

网站一、a.com

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"/>   #对应图1
    <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://b.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://b: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')

def get_data(request):
    return HttpResponse('ok')

网站二、b.com

api.py

from django.shortcuts import render,HttpResponse
import json
# Create your views here.

def api(request):
    li = ['alex', 'eric', 'tony']
    # "['alex', 'eric', 'tony']"
    temp = "fafafa(%s)" %(json.dumps(li))
    # fafafa(['alex', 'eric', 'tony'])
    return HttpResponse(temp)

事例 AJAX2 AJAX3 绑定host

1.点击第一个按钮结果：

图一

2.点击第二个按键，受同源策略影响，响应不成功，浏览器会拒绝。

3.第三个按钮，jsonp 利用 sribe标签收发请求，显示结果

4.实际案例执行结果

二、图片显示瀑布流

　　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

{% load xx %}
<!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>

    <div class="container">
        <div class="column">
            {% for i in img_list %}
                {% if forloop.counter|detail1:"4,1" %}
                    <div class="item">
                        {{ forloop.counter }}
                        <img src="/static/{{ i.src }}">
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        <div class="column">
            {% for i in img_list %}
                {% if forloop.counter|detail1:"4,2" %}
                    <div class="item">
                        {{ forloop.counter }}
                        <img src="/static/{{ i.src }}">
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        <div class="column">
            {% for i in img_list %}
                {% if forloop.counter|detail1:"4,3" %}
                    <div class="item">
                        {{ forloop.counter }}
                        <img src="/static/{{ i.src }}">
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        <div class="column">
            {% for i in img_list %}
                {% if forloop.counter|detail1:"4,0" %}
                    <div class="item">
                        {{ forloop.counter }}
                        <img src="/static/{{ i.src }}">
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>

</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})

余数相同的图片显示为一列,显示效果

三、组合搜索

posted @ 2016-10-23 09:42 不是云阅读(601) 评论(0) 编辑收藏举报

刷新页面返回顶部

不是云

django-jsonp 瀑布流 组合搜索 多级评论

公告

django-jsonp 瀑布流组合搜索多级评论