django -前后端分离，ajax

1.直接在前端调用第三方的接口：

三门峡今日天气：<span id="weather_1"></span>转
<span id="weather_2"></span>，<span id="tmp_1">
</span>°到<span id="tmp_2"></span>° </span>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            type:'GET',
            dataType: 'jsonp',
            jsonp: 'callback',
            url:'https://api.asilu.com/weather_v2/',
            success:function (ret) {
                $('#weather_1').text(ret.forecasts[0].casts[0].dayweather);
                $('#weather_2').append(ret.forecasts[0].casts[0].nightweather);
                $('#tmp_1').append(ret.forecasts[0].casts[0].daytemp);
                $('#tmp_2').append(ret.forecasts[0].casts[0].nighttemp);
            }
        })
    })
</script>

2.调用自己数据库：(带分页的)
后端：
@csrf_exempt

得到通知公告的具体

def get_tongzhi(request):
    code = 200
    msg = 'success'
    # 获取全部数据
    tongzhis_all = list(Article.objects.filter(sort=2).order_by("time").values('title', 'time', 'id'))
    # 获取前端传来的页数
    page = request.POST.get('page')
    print(page)
    # 分页
    paginator = Paginator(tongzhis_all, 2)
    try:
        # 尝试分页
        tongzhis = paginator.page(page)
    except PageNotAnInteger:
        # 如果不是整数
        tongzhis = paginator.page(1)
    except InvalidPage:
        # 如果请求的页数不存在
        code = 404
        msg = 'error'
        tongzhis = '页面不存在！'
    except EmptyPage:
        # 如果请求的页数不在合法的页数范围内，返回结果的最后一页.
        tongzhis = paginator.page(paginator.num_pages)
    previous = tongzhis.has_previous()
    next = tongzhis.has_next()
    context = {
        'code': code,
        'msg': msg,
        'data': list(tongzhis),  # 当前页的数据
        'page_count': paginator.num_pages,  # 总页数
        'has_previous': previous,  # 是否有上一页
        'previous_num': tongzhis.number-1 if previous else None,  # 上一页的页数
        'has_next': next,  # 是否有下一页
        'next_num': tongzhis.number+1 if next else None,  # 下一页的页数
        'new_page_num': tongzhis.number  # 当前页数
    }
    response = json.dumps(context, cls=DateEnconding)
    return HttpResponse(response, content_type='application/json')

前端：

<div class="liebiaoyi">
    <ui id="liebiao">

    </ui>

    <ui class="sjyi" id="shijian" >

    </ui>
</div>

<div id="fenye" style="position: absolute; left: 300px;" class="ui pagination menu xuhao">
    <a id="sy" class="disabled item">首页</a>
    <a id="syy" class="disabled item">上一页</a>
    <div style="height: 40px" class="ui item">
        <p>当前第<span id="page">1</span>页/共 <span id="zys"></span> 页.</p>
    </div>
    <a href="?page=2" class="item">下一页</a>
    <a href="?page={{ num }}" class="item">尾页</a>
</div>



{# ajax #}
<script>
    $(document).ready(function AJAX() {
        $('#liebiao').empty();
        $('#shijian').empty();
        var page = $('#page').text();
        $.ajax({
            url:'http://127.0.0.1:8000/get_tongzhi/',
            type:'POST',
            data: {'page':page},
            dataType: 'json',
            success:function (ret) {
                for (var i in ret.data) {
                    $('#liebiao').append(
                        '<img src="../static/images/＞.png" alt="">\
                        <a style="margin-left: 20px; font-weight: 400;font-size:20px;color:rgba(0,0,0,1);line-height:30px;" href="/detail/'+ret.data[i].id+'">'+ret.data[i].title+'</a>\
                        <br>\
                        <br>'
                    );
                    $('#shijian').append(
                        '<p style="font-weight: 400;font-size:20px;color:rgba(0,0,0,1);line-height:10px; width: 119px;">'+ret.data[i].time+'</p>\
                        <br>'
                    );
                }
                if (!ret.has_previous) {
                    if (!ret.has_next) {
                        $('#fenye').html(
                            '<span id="sy" class="disabled item">首页</span>\
                            <span id="syy" class="disabled item">上一页</span>\
                            <div style="height: 40px" class="ui item">\
                                <p>当前第<span id="page">'+ret.new_page_num+'</span>页/共 <span id="zys">'+ret.page_count+'</span> 页.</p>\
                            </div>\
                            <span id="xyy" class="disabled item">下一页</span>\
                            <span id="wy" class="disabled item">尾页</span>'
                        )
                    }
                    else{
                        $('#fenye').html(
                            '<span id="sy" class="disabled item">首页</span>\
                            <span id="syy" class="disabled item">上一页</span>\
                            <div style="height: 40px" class="ui item">\
                                <p>当前第<span id="page">'+ret.new_page_num+'</span>页/共 <span id="zys">'+ret.page_count+'</span> 页.</p>\
                            </div>\
                            <a id="xyy" class="item">下一页</a>\
                            <a id="wy" class="item">尾页</a>'
                        )
                    }
                }
                else {
                    if (!ret.has_next) {
                        $('#fenye').html(
                            '<a id="sy" class="item">首页</a>\
                            <a id="syy" class="item">上一页</a>\
                            <div style="height: 40px" class="ui item">\
                                <p>当前第<span id="page">'+ret.new_page_num+'</span>页/共 <span id="zys">'+ret.page_count+'</span> 页.</p>\
                            </div>\
                            <span id="xyy" class="disabled item">下一页</span>\
                            <span id="wy" class="disabled item">尾页</span>'
                        )
                    }
                    else {
                        $('#fenye').html(
                            '<a id="sy" class="item">首页</a>\
                            <a id="syy" class="item">上一页</a>\
                            <div style="height: 40px" class="ui item">\
                                <p>当前第<span id="page">'+ret.new_page_num+'</span>页/共 <span id="zys">'+ret.page_count+'</span> 页.</p>\
                            </div>\
                            <a id="xyy" class="item">下一页</a>\
                            <a id="wy" class="item">尾页</a>'
                        )
                    }
                }
                $('a#sy').click(function () {
                    $('#page').text("1");
                    location.reload();
                });
                $('a#syy').click(function () {
                    $('#page').text(ret.previous_num);
                    AJAX();
                });
                $('a#xyy').click(function () {
                    $('#page').text(ret.next_num);
                    AJAX();
                });
                $('a#wy').click(function () {
                    $('#page').text(ret.page_count);
                    AJAX();
                });
            },
            error:function () {
                alert("服务器请求超时,请重试!");
            }
        })
    })
</script>


url
path('get_tongzhi/', views.get_tongzhi),
path('tongzhi/', views.tongzhi),