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 瀑布流 组合搜索 多级评论的主要内容,如果未能解决你的问题,请参考以下文章

Flutter瀑布流及通用列表解决方案

网页设计之瀑布流,排列图片img最好的方式之一代码+注释=很详细!!!

一「表」走天下,Flutter瀑布流及通用列表解决方案

Python入门自学进阶-Web框架——33瀑布流布局与组合查询

唯品会数据采集-异步瀑布流

Swift 自定义布局实现瀑布流视图