Django與AJAX實現網頁動態數據顯示的示例代碼

Posted on by

前言

這部分已經折騰我兩天瞭，還是沒有頭緒，可能還會折騰更久，最後在第三天上午解決問題，在一個不起眼的地方被坑瞭，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>

上面的程序將第1步裡的temp1和temp2寫入id為result1和result2的標簽裡

到此這篇關於Django與AJAX實現網頁動態數據顯示的示例代碼的文章就介紹到這瞭,更多相關Django AJAX 動態數據顯示內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：