Django结合ajax进行页面实时更新的例子

Django结合ajax进行页面实时更新踩过的坑

简单记录一下在使用Django、echarts和ajax实现数据动态更新时遇到的一些坑：

1、url配置错误，路径没有找对（最后使用绝对路径）

2、后台（view.py）传的数据类型不对导致

3、没有配置js源，根本发不出ajax请求（第一次接触js，根本不知道这个大坑。。）

4、不知道哪里报错可以根据XMLHttpRequest.status、XMLHttpRequest.readyState和textStatus进行分析

5、（现在还没弄明白的）在view.py）中向前端传数据的函数需要加上@csrf_exempt，不然根本不可能成功（在这个坑找了好久，科学上网才查到）

1、ajax参数：

 $.ajax({
      url:'http://127.0.0.1:8000/hiapp/goData/',
      type:"Post",
      data: {},
      dtype:'list',
     success: function (da) {
         alert("success")
          },
     error: function (XMLHttpRequest, textStatus,errorThrown) {
      alert("fail "+XMLHttpRequest.status+" "
          XMLHttpRequest.readyState+" "+textStatus);}

2、view.py示例

@csrf_exempt
def goData(request):
  if request.method=='POST' :
    a = range(100)
    list1=random.sample(a,7)
    list2=random.sample(a,7)
    list3=random.sample(a,7)
    return
      HttpResponse(json.dumps({"list1":list1,"list2":list2,"list3":list3}))

生成了三组随机数，没有报错的话会传给ajax的success

3、url.py

urlpatterns = [

  url(r'^goData/$',views.goData,name='goData'),
]

4、最后就是要 记得引入相应的文件（js和echarts）

以上这篇Django结合ajax进行页面实时更新的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Django+Ajax+jQuery实现网页动态更新的实例

    views.py中的修改 增加相应的请求处理函数: def getdevjson(request): print 'get here' if ('key' in request.GET): searchkey = request.GET.get('key') return JsonResponse(search(searchkey)) else: return HttpResponse('Sorry!') 返回字符串中,既可以使用from django.http import JsonRespo

  • django+js+ajax实现刷新页面的方法

    本文实例讲述了django+js+ajax实现刷新页面的方法.分享给大家供大家参考,具体如下: 在服务器开发的时候,为了方便将服务器对外开一个接口来操作,可以使用django制作网页,通过页面来操作服务器.这样可以将服务器的维护工作暴漏在更加友好的界面操作,而非通过SecureCRT去敲指令.而且还能提供给策划运维人员来处理一些常规的事情. 这里将会讲解一个非常小的知识点: ① js如何发起一次请求 ② django如何响应请求 ③ js接收到响应如何区域刷新页面 js部分 我们先在html中定

  • Django结合ajax进行页面实时更新的例子

    Django结合ajax进行页面实时更新踩过的坑 简单记录一下在使用Django.echarts和ajax实现数据动态更新时遇到的一些坑: 1.url配置错误,路径没有找对(最后使用绝对路径) 2.后台(view.py)传的数据类型不对导致 3.没有配置js源,根本发不出ajax请求(第一次接触js,根本不知道这个大坑..) 4.不知道哪里报错可以根据XMLHttpRequest.status.XMLHttpRequest.readyState和textStatus进行分析 5.(现在还没弄明白

  • vue3使用vuex实现页面实时更新数据实例教程(setup)

    目录 前言 1.项目引入vue 2.main.js引入vuex 3.新建store文件夹 3.在传输数据的页面引入vuex (api.js) 4.渲染页面 总结 前言 我项目中使用ws获取数据,因为数据是不断更新的,vue页面只更新一次就不更新了,然后暂时只能想到vuex来保存更新状态,页面监听数据实现实时更新.下面是我测试时用的数据,没有用ws,用的是定时器模拟定时发送数据. 1.项目引入vue npm i vuex 2.main.js引入vuex import { createApp } f

  • Django对数据库进行添加与更新的例子

    先把models.py摆这儿 #models.py class UserProfile(AbstractUser): ''' 继承Django的AbstractUser 并向里面添加两条数据内容怀疑 ''' gender = models.CharField(max_length=6,choices=(('male','男'),('female','女')),default='female',verbose_name='性别') memo = models.TextField(null=True

  • 页面实时更新时间的JS实例代码

    复制代码 代码如下: function startTime() {                     var today = new Date(); //定义日期对象                        var yyyy = today.getFullYear(); //通过日期对象的getFullYear()方法返回年                         var MM = today.getMonth() + 1; //通过日期对象的getMonth()方法返回年 

  • Django利用AJAX技术实现博文实时搜索

    Django利用AJAX技术实现博文实时搜索

    学习Python Web和Django开发不能只学习Python.我们有时必需借助其它技术比如AJAX实现我们想要的功能.今天我们就要利用Django 2.0 + AJAX开发一个功能性页面: 我们一边输入关键词,网页一边会给你提示所找到的博文数量. 什么是AJAX技术?它的应用场景有哪些? Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术.通过在后台与服务器进行少量数据交

  • Ajax方式实现定期更新页面某块内容的方法

    本文实例讲述了Ajax方式实现定期更新页面某块内容的方法.分享给大家供大家参考.具体实现方法如下: function updateShouts(){ // Assuming we have #shoutbox $('#shoutbox').load('latestShouts.php'); } setInterval( "updateShouts()", 10000 ); 希望本文所述对大家的Ajax程序设计有所帮助.

  • jQuery Ajax 实现在html页面实时显示用户登录状态

    当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定ID 如: <div id="ajaxlogin"></div> 二.新建一个动态的ajaxlogin.php文件,用来判断用户是否登录了 代码如下: <? session_start(); if( $_SESSION['u_login']=='turelogi

  • Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

    1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"

  • Ajax实现页面自动刷新实例解析

    Ajax实现页面自动刷新实例解析

    Ajax简介: AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重

随机推荐