Django與AJAX實(shí)現(xiàn)網(wǎng)頁動(dòng)態(tài)數(shù)據(jù)顯示的示例代碼

更新時(shí)間：2021年02月24日 09:46:29 作者：Uncle_Gen

這篇文章主要介紹了Django與AJAX實(shí)現(xiàn)網(wǎng)頁動(dòng)態(tài)數(shù)據(jù)顯示的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

這部分已經(jīng)折騰我兩天了，還是沒有頭緒，可能還會(huì)折騰更久，最后在第三天上午解決問題，在一個(gè)不起眼的地方被坑了，jQuery加載的問題。會(huì)者不難，難者不會(huì)，希望后面人少走彎路吧

環(huán)境

windows10
pycharm2017.3.3 professional edition
python3.6.4
django2.0.2

方法

創(chuàng)建后臺(tái)讀取數(shù)據(jù)函數(shù)，用于后臺(tái)從數(shù)據(jù)庫讀取數(shù)據(jù)。在views.py文件內(nèi)增加以下代碼

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是函數(shù)名
Test是Django項(xiàng)目下的模型
order_by(“-time”)[0]指按時(shí)間列倒序排列并取第一行數(shù)據(jù)
temp1是第一行數(shù)據(jù)里的temp1數(shù)據(jù)

如果沒有數(shù)據(jù)庫數(shù)據(jù)的話，直接寫成固定的數(shù)據(jù)用來測(cè)試也是可以的

加載函數(shù)，讓HTML頁面能夠訪問到函數(shù)。在urls.py添加一下代碼

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

前端使用jQuery訪問后臺(tái)函數(shù)，要實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)顯示，還需要增加定時(shí)程序，在HTML頁面插入以下代碼

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

上面的程序?qū)⒌?步里的temp1和temp2寫入id為result1和result2的標(biāo)簽里

到此這篇關(guān)于Django與AJAX實(shí)現(xiàn)網(wǎng)頁動(dòng)態(tài)數(shù)據(jù)顯示的示例代碼的文章就介紹到這了,更多相關(guān)Django AJAX 動(dòng)態(tài)數(shù)據(jù)顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Python的functools模塊使用及說明
這篇文章主要介紹了Python的functools模塊使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Python實(shí)現(xiàn)GUI學(xué)生管理系統(tǒng)的示例代碼
這篇文章主要為大家介紹了如何留Python語言實(shí)現(xiàn)簡(jiǎn)易的GUI學(xué)生管理系統(tǒng)，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Python有一定幫助，需要的可以參考下
2022-06-06
python3 requests庫實(shí)現(xiàn)多圖片爬取教程
今天小編就為大家分享一篇python3 requests庫實(shí)現(xiàn)多圖片爬取教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-12-12
Python實(shí)現(xiàn)批量下載圖片的方法
這篇文章主要介紹了Python實(shí)現(xiàn)批量下載圖片的方法,涉及Python基于urllib、urllib2及re等模塊獲取URL及正則匹配下載圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
Python:合并兩個(gè)numpy矩陣的實(shí)現(xiàn)
今天小編就為大家分享一篇Python:合并兩個(gè)numpy矩陣的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-12-12
使用Python處理json字符串中的非法雙引號(hào)問題
這篇文章主要介紹了使用Python處理json字符串中的非法雙引號(hào)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
Windows 7下Python Web環(huán)境搭建圖文教程
這篇文章主要為大家詳細(xì)介紹了Windows 7下Python Web環(huán)境搭建圖文教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-03-03
Pycharm中配置Jupyter環(huán)境的圖文教程
本文主要介紹了Pycharm中配置Jupyter環(huán)境的圖文教程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
Python3.10接入ChatGPT實(shí)現(xiàn)逐句回答流式返回
這篇文章主為大家要介紹了Python3.10接入ChatGPT實(shí)現(xiàn)逐句回答流式返回示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
python基礎(chǔ)教程之簡(jiǎn)單入門說明(變量和控制語言使用方法)
這篇文章主要介紹了開始學(xué)習(xí)python的第一步需要知道的知識(shí)(變量和控制語言使用方法),需要的朋友可以參考下
2014-03-03