Django与AJAX实现网页动态数据显示的示例代码_Python

Django与AJAX实现网页动态数据显示的示例代码

2021-09-09 00:11Uncle_Gen Python

这篇文章主要介绍了Django与AJAX实现网页动态数据显示的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

这部分已经折腾我两天了，还是没有头绪，可能还会折腾更久，最后在第三天上午解决问题，在一个不起眼的地方被坑了，jQuery加载的问题。会者不难，难者不会，希望后面人少走弯路吧

环境

windows10
pycharm2017.3.3 professional edition
python3.6.4
django2.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]指按时间列倒序排列并取第一行数据
temp1是第一行数据里的temp1数据

如果没有数据库数据的话，直接写成固定的数据用来测试也是可以的

加载函数，让HTML页面能够访问到函数。在urls.py添加一下代码

				?

									urlpatterns = [

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

									]

前端使用jQuery访问后台函数，要实现数据动态显示，还需要增加定时程序，在HTML页面插入以下代码

				?

									<script>

									  $(document).ready(function(){

									    function refresh(){

									      $.getJSON("/data_fresh/", function (ret) {

									        $('#result').html(ret.data1);

									        $('#result2').html(ret.data2);

									      })

									    }

									    setInterval(refresh, 3000)

									  })

									</script>