点击分类展示新闻（类ajax）

最新推荐文章于 2022-06-27 16:34:07 发布

ィふぬ！旧时光

最新推荐文章于 2022-06-27 16:34:07 发布

阅读量422

点赞数

分类专栏： Django 文章标签： Django 类ajax

本文链接：https://blog.csdn.net/Tqq_sunshine/article/details/89504337

版权

Django 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文介绍如何利用Django框架构建一个类AJAX效果的新闻展示功能，允许用户无刷新地获取和更新新闻内容，提升用户体验。

摘要由CSDN通过智能技术生成

展示新闻(类ajax)

# 展示新闻
def show_news(request):
    cate = Cate.objects.all()
    cid = request.GET.get('id',1)
    if cid:
        # 从前台获取当前显示的第几页
        current_page = request.GET.get('page',1)
        c = Cate.objects.get(id=cid)
        news = News.objects.filter(cate=c).all()
         # 分页操作,每页显示一条
        page = Paginator(news,1)

        # 根据当前页显示信息
        newslist = page.get_page(current_page)
        # 计算一共有多少页
        total_page = page.num_pages
   
    return render(request,'kaoshi1/show_news.html',locals())

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻展示页面</title>
    <link rel="stylesheet" href="../../static/css/jquery.pagination.css">
    <script type="text/javascript" src="../../static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.pagination.min.js"></script>
    <style>
        .big{width: 600px;height: 200px;text-align: center;}
        .small{width: 800px;height: 30px;text-align: center;}
        .m{text-align: left;}
        .n{text-align: right;}
        .m,.n{width: 400px;height: 20px;float: left;margin: 0 auto;}
    </style>
</head>
<body>
<div class="big">
    
    {% for c in cate %}
        <button value="{{c.id}}"><a href="/app1/show_news/?id={{c.id}}">{{c.name}}</a></button>
    {% endfor %}
        
    {% for n in newslist %}
    <div class="small">
        <div class="m">{{n.title}}</div>

        <div class="n">{{n.create_time}}</div>
        <hr>
        
    </div>
    {% endfor %}
    
    <input type="text" class="c" value="{{c.id}}" hidden>
    
    <div id="pagination" class="page"></div>

</div>
    <script>
        $(function() {
            $("#pagination").pagination({
                currentPage: {{current_page}},
                totalPage: {{total_page}},
                callback: function(current) {
                    var lei_id = $(".c").val()
                    window.location.href="/app1/show_news?page="+current+'&id='+lei_id

                }
            });
        });
    </script>
</body>

</html>