Django+Ajax異步刷新/定時自動刷新實例詳解
更新時間：2022年10月25日 16:29:11 作者：Halo-Z
AJAX是前端技術的集合,包括JavaScript、XML、HTML、CSS等,下面這篇文章主要給大家介紹了關于Django+Ajax異步刷新/定時自動刷新的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
分享一下最近在學習Django過程中，遇到和解決的一些有趣的方法和問題
一、Django是什么？
Django也不用在過多的去介紹了。使用python進行web開發(fā)的基本上都在用著框架，反正大家都在用，哈哈哈
二、Ajax異步刷新
1.jQuery語法下的Ajax運用
代碼如下（示例）：
$.ajax(
{
type:"GET",
url:"/ajax_loadavg",
dataType:"json",
success:function (data) {
json_data = data
}
當然大家別忘了在頁面引入jQuery的源
<script src="{% static 'Privilege/vendor/jquery/jquery.min.js'%}"></script>
通過這種方式，可以實現(xiàn)異步數(shù)據(jù)更新，做到只刷新部分頁面而不需要整個頁面進行刷新?。?！
2.定時刷新頁面的樣例
這里面使用chartist響應式圖標作為案例，設定每15s中對圖表進行一次刷新。
HTML5代碼示例如下：
<div id="headline-chart" class="ct-chart"></div>
jQuery代碼示例如下：
setInterval(function () {
$.ajax(
{
type:"GET",
url:"/ajax_loadavg",
dataType:"json",
success:function (data) {
json_data = data
data = {
labels: [0, 10, 20, 30, 40, 50, 60],
series: [
[1, 2, 3, 4, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
]
};
options = {
height: 300,
showArea: true,
showLine: false,
showPoint: false,
fullWidth: true,
axisX: {
showGrid: false,
showLabel: false
},
lineSmooth: false,
};
new Chartist.Line('#headline-chart', data, options);
}
},15000)
Django 視圖（view）代碼如下：
注意：此處只是展示Ajax與Django如何進行交互，Ajax獲取的JSON數(shù)據(jù)并未進行利用！
@csrf_exempt
def ajax_loadavg(request):
if request.method == 'GET':
context = {'output_loadavg':output_loadavg}
return HttpResponse(json.dumps(context))
url配置
path('ajax_loadavg/', views.ajax_loadavg, name='ajax_loadavg'),
3.展示效果
總結
感興趣的小伙伴可以參看，也希望有想法的小伙伴，評論區(qū)多多發(fā)表意見?。?！
Chartist圖表官網鏈接
http://gionkunz.github.io/chartist-js/
到此這篇關于Django+Ajax異步刷新/定時自動刷新的文章就介紹到這了,更多相關Django Ajax定時自動刷新內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在Python中使用PyQt5實現(xiàn)應用程序的中英文切換功能,可以通過國際化（i18n）和本地化（l10n）的技術來實現(xiàn),以下是一個詳細的教程,包括UI界面多語言切換和程序內部字符串多語言切換兩部分,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了python線程池（threadpool）模塊使用筆記詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Python如何實現(xiàn)xml解析并輸出到Excel上
本文介紹了如何使用Python的ElementTree模塊解析XML文件,并將解析后的數(shù)據(jù)寫入Excel文件,通過編寫XML文件、解析XML、編寫將數(shù)據(jù)寫入Excel的函數(shù),最終實現(xiàn)XML數(shù)據(jù)到Excel的轉換2025-02-02
pyinstaller打包后偶爾出現(xiàn)黑窗口一閃而過的問題及解決
這篇文章主要介紹了pyinstaller打包后偶爾出現(xiàn)黑窗口一閃而過的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了如何使用Python編寫一個簡單而強大的注冊機,生成卡密來實現(xiàn)用戶注冊,從而輕松登錄應用程序,有需要的小伙伴快可以參考下2023-12-12
字典中有成對出現(xiàn)的鍵和值,但是字典中的鍵值對不是都能修改的,只有值才能修改,下面這篇文章主要給大家介紹了關于Python交換字典鍵值對的四種方法,需要的朋友可以參考下2022-12-12
python3連接kafka模塊pykafka生產者簡單封裝代碼
今天小編就為大家分享一篇python3連接kafka模塊pykafka生產者簡單封裝代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-12-12
Python基于paramiko庫操作遠程服務器的實現(xiàn)
本文主要介紹了使用Python的Paramiko庫來操作遠程服務器,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01
prettytable庫就是這么一個工具，prettytable可以打印出美觀的表格，并且對中文支持相當好。本文將介紹如何通過prettytable輸出好看的表格，需要的可以參考一下2022-01-01
這篇文章主要介紹了Python判斷列表是否已排序的各種方法及其性能分析的相關資料,需要的朋友可以參考下2016-06-06