Django+Ajax异步刷新/定时自动刷新实例详解

 更新时间:2022年10月25日 16:29:11   作者:Halo-Z  
AJAX是前端技术的集合,包括JavaScript、XML、HTML、CSS等,下面这篇文章主要给大家介绍了关于Django+Ajax异步刷新/定时自动刷新的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

分享一下最近在学习Django过程中,遇到和解决的一些有趣的方法和问题

一、Django是什么?

Django也不用在过多的去介绍了。使用python进行web开发的基本上都在用着框架,反正大家都在用,哈哈哈

二、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>

通过这种方式,可以实现异步数据更新,做到只刷新部分页面而不需要整个页面进行刷新!!!

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数据并未进行利用!

@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.展示效果

可以替换series部分的数据,进行展示

总结

感兴趣的小伙伴可以参看,也希望有想法的小伙伴,评论区多多发表意见!!!

Chartist图表官网链接

http://gionkunz.github.io/chartist-js/

到此这篇关于Django+Ajax异步刷新/定时自动刷新的文章就介绍到这了,更多相关Django Ajax定时自动刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Python使用PyQt5实现中英文切换功能

    Python使用PyQt5实现中英文切换功能

    在Python中使用PyQt5实现应用程序的中英文切换功能,可以通过国际化(i18n)和本地化(l10n)的技术来实现,以下是一个详细的教程,包括UI界面多语言切换和程序内部字符串多语言切换两部分,需要的朋友可以参考下
    2024-12-12
  • python线程池(threadpool)模块使用笔记详解

    python线程池(threadpool)模块使用笔记详解

    这篇文章主要介绍了python线程池(threadpool)模块使用笔记详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Python如何实现xml解析并输出到Excel上

    Python如何实现xml解析并输出到Excel上

    本文介绍了如何使用Python的ElementTree模块解析XML文件,并将解析后的数据写入Excel文件,通过编写XML文件、解析XML、编写将数据写入Excel的函数,最终实现XML数据到Excel的转换
    2025-02-02
  • pyinstaller打包后偶尔出现黑窗口一闪而过的问题及解决

    pyinstaller打包后偶尔出现黑窗口一闪而过的问题及解决

    这篇文章主要介绍了pyinstaller打包后偶尔出现黑窗口一闪而过的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 基于Python实现一个简单的注册机并生成卡密

    基于Python实现一个简单的注册机并生成卡密

    这篇文章主要为大家详细介绍了如何使用Python编写一个简单而强大的注册机,生成卡密来实现用户注册,从而轻松登录应用程序,有需要的小伙伴快可以参考下
    2023-12-12
  • Python交换字典键值对的四种方法实例

    Python交换字典键值对的四种方法实例

    字典中有成对出现的键和值,但是字典中的键值对不是都能修改的,只有值才能修改,下面这篇文章主要给大家介绍了关于Python交换字典键值对的四种方法,需要的朋友可以参考下
    2022-12-12
  • python3连接kafka模块pykafka生产者简单封装代码

    python3连接kafka模块pykafka生产者简单封装代码

    今天小编就为大家分享一篇python3连接kafka模块pykafka生产者简单封装代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-12-12
  • Python基于paramiko库操作远程服务器的实现

    Python基于paramiko库操作远程服务器的实现

    本文主要介绍了使用Python的Paramiko库来操作远程服务器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-01-01
  • Python利用prettytable库输出好看的表格

    Python利用prettytable库输出好看的表格

    prettytable库就是这么一个工具,prettytable可以打印出美观的表格,并且对中文支持相当好。本文将介绍如何通过prettytable输出好看的表格,需要的可以参考一下
    2022-01-01
  • Python判断列表是否已排序的各种方法及其性能分析

    Python判断列表是否已排序的各种方法及其性能分析

    这篇文章主要介绍了Python判断列表是否已排序的各种方法及其性能分析的相关资料,需要的朋友可以参考下
    2016-06-06

最新评论