美文网首页杂文雅事
Django+JQuery实现定时刷新局部页面

Django+JQuery实现定时刷新局部页面

作者: JL_Cheng | 来源:发表于2018-10-31 16:52 被阅读0次

    简介

    在做“弹幕弹幕”小程序管理员前端时,需要在页面上不断更新弹幕列表,方便管理员对弹幕进行审核。之前用flask框架可以使用主动推送的方式更新前端页面,但是Django框架要实现主动推送是比较复杂的,于是我们最后使用了轮询的方式进行页面更新。

    实现方法

    项目架构(部分目录)

    .
    ├── organizer/
    |    ├── views.py
    |    └── urls.py
    └──  templates/
          ├── barrages_list.html
          └── barrages_refresh.html
    
    

    实现原理

    前端页面通过JQuery定时向后端发送GET请求,获取最新的数据库数据之后,更新局部页面的内容。

    代码实现

    1、barrages_list.html中的主要代码:

    <ul class="list-group" id="barrages_list"></ul>
    
    <script type="text/javascript">
      //定时刷新界面(0.5秒)
      $(document).ready(function(){
          setInterval(function() {
            $.get("{% url 'barrages_refresh' %}" + window.location.search,//GET请求的url地址
            function(data,status){
              $("#barrages_list").html(data);//更新列表内容
              });
            }, 500);
      });
    </script>
    

    2、barrages_refresh.html中的主要代码:

    {% for barrage in data %}
      <li class="list-group-item">
        <h4 style="display:inline-block;">{{ barrage.content }}</h4>
        <div style="display:inline-block;float:right;">
          <button type="submit" class="btn btn-success pass_button" value="{{ barrage.id }}" style="width:100px;margin-right:30px;">通过</button>
          <button type="submit" class="btn btn-danger no_pass_button" value="{{ barrage.id }}" style="width:100px;margin-right:30px;">不通过</button>
        </div>
      </li>
    {% endfor %}
    

    3、views.py中的主要代码:

    class BarragesRefresh(APIView):
        def get(self):
            self.template="organizer/barrages_refresh.html"#渲染的模板
            self.check_input('activity_id')
            activity_id = self.input['activity_id']
            barrages = Barrage.objects.filter(activity_id=activity_id, has_checked_manually=False)
            barrages = list(barrages.values("id", "type","content", "openid", "screen_id"))
            return barrages
    

    4、urls.py中的主要代码:

    urlpatterns = [
        url('barrages/refresh', BarragesRefresh.as_view(),name='barrages_refresh'),
    ]
    

    相关文章

      网友评论

        本文标题:Django+JQuery实现定时刷新局部页面

        本文链接:https://www.haomeiwen.com/subject/pavatqtx.html