Django结合AJAX实现网页数据动态刷新：从环境配置到jQuery定时获取

前言

这一功能模块的开发过程耗费了两天时间，期间始终未能找到突破口，甚至可能还需要更长时间。最终在第三天上午成功解决问题，关键在于发现了一个容易被忽视的细节：jQuery的加载顺序问题。正所谓“会者不难，难者不会”，希望这段经历能帮助后来的开发者避免类似的弯路。

环境

• 操作系统：Windows 10
• 集成开发环境：PyCharm 2017.3.3 Professional Edition
• Python版本：3.6.4
• Django版本：2.0.2

方法

首先，我们需要创建一个后台函数用于从数据库读取数据。请在views.py文件中添加以下代码逻辑：

from django.http import JsonResponse

def data_fresh(request):
  context = {"data1": Test.objects.order_by("-time")[0].temp1,
        "data2": Test.objects.order_by("-time")[0].temp2}
  return JsonResponse(context)

• data_fresh为自定义函数名称
• Test为Django项目中定义的模型类
• order_by("-time")[0]表示按照time字段进行倒序排序，并获取排序后的第一行数据
• temp1表示从获取的第一行数据中提取的temp1字段值

如果当前数据库中尚无数据，可以直接编写固定数据用于测试验证功能是否正常

接下来，需要配置加载函数，使HTML页面能够访问到后台接口。请在urls.py文件中添加如下路由配置：

urlpatterns = [
  path('data_fresh/', views.data_fresh, name="data_fresh"),
]

前端通过jQuery访问后台函数以实现数据的动态显示，为此还需要增加一个定时执行程序。请在HTML页面中插入以下JavaScript代码：

<script>
  $(document).ready(function(){
    function refresh(){
      $.getJSON("/data_fresh/", function (ret) {
        $('#result').html(ret.data1);
        $('#result2').html(ret.data2);
      })
    }
    setInterval(refresh, 3000)
  })
</script>

上述程序的作用是将第一步中获取的temp1和temp2数据分别写入ID为result1和result2的HTML标签中

至此，关于Django与AJAX实现网页动态数据显示的示例代码介绍完毕。如需了解更多关于Django AJAX动态数据的内容，请搜索本站历史文章或继续浏览后续相关文章。希望大家今后能多多支持本站！