前言

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

環(huán)境

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

方法

創(chuàng)建后臺讀取數(shù)據(jù)函數(shù)，用于后臺從數(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項目下的模型
• order_by(“-time”)[0]指按時間列倒序排列并取第一行數(shù)據(jù)
• temp1是第一行數(shù)據(jù)里的temp1數(shù)據(jù)
  

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

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

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

前端使用jQuery訪問后臺函數(shù)，要實現(xiàn)數(shù)據(jù)動態(tài)顯示，還需要增加定時程序，在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實現(xiàn)網(wǎng)頁動態(tài)數(shù)據(jù)顯示的示例代碼的文章就介紹到這了,更多相關(guān)Django AJAX 動態(tài)數(shù)據(jù)顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！