django+js+ajax刷新页面

Ajax在Django中的实战应用:更新商品数量 在现代Web开发中,用户体验的提升往往依赖于页面无刷新更新数据的技术,Ajax正是实现这一目标的利器。本文将通过一个实际案例,展示如何使用Ajax与Django配合,实现商品数量的动态更新。 阅读详情

在服务器开发的时候,为了方便将服务器对外开一个接口来操作,可以使用django制作网页,通过页面来操作服务器。这样可以将服务器的维护工作暴漏在更加友好的界面操作,而非通过SecureCRT去敲指令。而且还能提供给策划运维人员来处理一些常规的事情。
这里将会讲解一个非常小的知识点:

js如何发起一次请求
django如何响应请求
js接收到响应如何区域刷新页面

js部分

我们先在html中定义一个button,并且将id设置成btnTerminalSvr。定义一个反馈的静态标题ntfText

        <h2 id="ntfText" >就绪</h2></br>
        <button type="button" class="btn btn-success" id="btnTerminalSvr">关闭服务器</button>

编写js来响应这个button的事件

<script type="text/javascript">
 $('#btnTerminalSvr').on('click', function () {
        alert('嘿,我听说您点击了按钮...' );
        ...
   });
</script>

完善一次ajax请求的请求调用,以及回调之后的处理:

<script type="text/javascript">
  $("#btnTerminalSvr").click(function(){
          $.ajax({
                url: './terminal_svr',
                type: 'POST',
                data: {},
                dataType: 'json',
                timeout: 10000,
                success: function(result) {
                if ( result.result == "post_success" ) {
                    $("#ntfText").html("发起成功");
                }else {
                    $("#ntfText").html("重复发起了");
                }
                }
              });
    });
</script>

在这里我们能在data里面填写一些json格式的数据结构,这样就能附带一些消息提供给服务器做调用。当调用成功之后他将会回调function(result)。这种写法是js的异步惯用写法,当服务器做出相应之后也我们能通过jQuery框架直接去修改id=ntfText部分的html字符串了。

django部分

第一步:我们先定义django的url相应的映射

    url(r'^terminal_svr', views.terminal_svr,name='terminal_svr'),

第二步:在views.py中实现这个处理函数

from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def terminal_svr(request):
    # 这里利用了django自身的登陆验证系统
    if not request.user.is_authenticated():
        return HttpResponseRedirect(request.META.get('HTTP_REFERER', '/admin/'))

    doSomething to terminal svr
    a = {}
    a["result"] = "post_success"
    return HttpResponse(json.dumps(a), content_type='application/json')

这块就比较简单了,我们可以读取request中的json传过来的信息,并且当操作成功后通过json串返回一个字串给前段来判断是否操作成功。

Django结合ajax进行页面实时更新的例子 今天小编就为大家分享一篇Django结合ajax进行页面实时更新的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 立即下载

相关推荐

GIS国土工具实战:从地类分析到坐标转换,一站式解决项目难题

本文详细介绍了GIS国土工具在国土整治项目中的高效应用,涵盖地类分析、坐标转换、影像加载等核心功能。通过实战案例展示如何利用该工具快速处理shp与txt文件转换、智能比对三调二调数据,以及优化影像加载策略,显著提升项目效率。特别适合需要处理复杂国土数据的专业人员使用。

weixin_28732953的博客 334

一周学会Django5 Python Web开发 - Django5内置Admin系统二次开发

一周学会Django5 Python Web开发 - Django5内置Admin系统二次开发

java1234的博客 1239

【win11+vs 2017+OpenCV4.5.5+Qt5.12配置】详细安装过程+小问题解决

由于Qt5无法与最新的vs2022兼容,扩展工具中一直显示不可用,所以将vs降级成vs2017。在安装Qt的过程中,会选择安装Qt套件,其中就的MCVS 2017,说明vs2017是与qt兼容的。当然也可以用qt creator这一原生IDE。OpenCV版本目前是最新的4.8.0,使用过程中没有什么问题,但是还是安装低版本大概率避免一些玄学问题。

qq_45306739的博客 3350

Django Pycharm 修改html后立即刷新页面

Django Pycharm 修改html后立即刷新页面

weixin_51662487的博客 973

零差云控关节模组:EtherCAT+preempt-RT实现微秒级同步

关节模组是协作机器人、外骨骼与高精度服务机器人的核心执行单元,其性能瓶颈常在于多轴运动的时序一致性与实时闭环能力。实现‘零差’同步依赖于确定性通信(如EtherCAT)与硬实时操作系统支持(如Linux preempt-RT),前者保障指令与状态在微秒级时间戳下全局对齐,后者消除内核调度抖动,使PID控制、电流采样、编码器反馈等关键路径具备纳秒级可预测性。技术价值体现在相位偏差<±0.01°、端到端控制周期稳定1ms、连续运行温漂<±1.2℃等工程指标,广泛应用于力控装配、康复训练、远程遥操作等对动态精度与

weixin_34192816的博客 1197

Ansys Icepak:通过 ECAD 导入和非共形网格划分掌握电子冷却

通过将 Icepak 与 HFSS(用于高频电磁学)、Ansys Mechanical(用于结构分析)和 Ansys Fluent(用于流体动力学)等 Ansys 产品相结合,工程师可以在单个工作流程中仿真电子系统的完整行为,从热和电气动力学到机械和流体动力学。精细网格可以应用于关键区域,而在不太重要的区域使用较粗的网格,从而在不牺牲精度的情况下加快仿真速度。这些功能使 Ansys Icepak 成为从事复杂电子设计的工程师不可或缺的工具,可实现更精确的热分析并缩短开发时间。用于高效仿真的非共形网格划分。

jkh920184196的博客 1393

Python web实战之Django的AJAX支持详解

本文介绍了Django的AJAX支持以及如何使用AJAX实现前端交互和动态网页。AJAX技术在现代Web开发中扮演着重要的角色,它可以大大提升用户体验,减轻服务器压力,节省带宽消耗。

Rocky006的博客 3021

腾讯面试——机器学习岗面试总结

先写合并两个有序数组,接着写合并n个有序的数组,假设总共m个数,讲了一个思路两两合并直到只剩下一个数组,分析一下时间复杂度(MlogN),面试官不满意,然后想了一下说了另一个思路,用n个指针开始指向各个数组的首端,用一个优先队列维护他们的最小值,每次拿出最小值的指针然后插入该指针的下一个值。感觉跟二面面试官聊得还是挺开心的,他详细地介绍了他们部门所做的业务,然后问了一下什么时候能来实现,我说只能暑假七八两个月,他觉得有点晚,这样子不利于转正,有些人都实习半年的,回去讨论一下,正式批之前给我答复。

FPGA/MATLAB学习教程/源码/项目合作开发 1229

Django使用livereload自动刷新页面

步骤 安装模块: pip install django-livereload-server 在settings.py中做如下修改: INSTALLED_APPS = ( ... 'livereload', ... ) MIDDLEWARE_CLASSES = ( ... 'livereload.middleware.LiveReloadScript', ) 启动livereload服务: python manage.py livereload 然后在另一个窗口

zhang35的博客 1861

RK3588开发笔记-ES8311音频芯片调试记录

本篇博客主要记录如何在RK3588平台试ES8311音频芯片的过程。这包括硬件连接、内核配置、驱动程序调试和测试步骤。通过以上步骤,我们成功在RK3588平台上调试了ES8311音频芯片。这包括硬件连接、内核配置、设备树配置、驱动加载以及音频测试。希望这篇调试记录能为其他开发者提供一些帮助。如果你有任何问题或建议,欢迎留言讨上调论。

flypig has a dream! 3161

WPF高级 | WPF 与数据库交互:连接、查询与数据更新

WPF高级 | WPF 与数据库交互:连接、查询与数据更新,在现代应用程序开发中,数据的存储和管理至关重要。Windows Presentation Foundation(WPF)作为一款强大的图形界面开发框架,常常需要与数据库进行交互,以实现数据的持久化存储、读取和更新。本文将深入探讨 WPF 与数据库交互的各个方面,包括数据库连接的建立、数据查询的执行以及数据更新的操作,并通过丰富的代码示例和详细的概念解释,帮助读者掌握这一关键技术。

不踩坑,不知道坑有多深;不总结,踩过的坑白踩。 6万+

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

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

LeoYY3的博客 9715

【项目实战】SOVD协议(面向服务的车辆诊断协议)

此外,AUTOSAR组织将SOVD部分内容的软件实现定义在了R22-11及以上版本的AUTOSAR Adaptive规范中,还支持动态发现车内诊断功能、获取高性能计算机(HPC)的Log信息等新的诊断需求,更符合当前软件定义汽车概念下的行业趋势。而SOVDGateway作为边缘节点,也肩负着对SOVD Client进行认证以及权限控制的责任,从而保证车辆的信息安全。相较于传统的UDS(Unified Diagnostic Services)协议,SOVD不仅保留了传统的读写数据、例程控制、故障读取等功能,

奶爸的编程之路,也就一周冷个三天 1900

python刷新网页脚本_django+js+ajax实现刷新页面的方法

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

weixin_39664994的博客 454

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

python django ajax 逻辑推理_django+js+ajax实现刷新页面的方法

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

weixin_39937312的博客 273

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

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

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

weixin_35993997的博客 676

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

Django1.6+jQuery Ajax + JSON 实现页面局部实时刷新

 最近微信公众帐号要扩展做一个签到系统,签到结果在一个网页上实时更新,即页面局部刷新。我想用Ajax来实现,之前公众帐号是用的Django搭的,我查找了Django的官方文档,没有封装Ajax。网上有各种方法,眼花缭乱。之前在图书馆借了本书《Django Web 开发指南》里面,有Ajax的实例,但是旧版本的Django,代码没法运行,但是里面倒是提供一种方法——把数

huangyimo的专栏 7780

Django传递参数给JS的两种方式

第一种: Ajax里的回调函数arg,这里的arg是字符串(不刷新页面) 如果Django要传递字符串,可以直接传递,JS接收可以直接使用 Django: def eg(request): str1="这是JS要的数据" return HttpResponse(str1) JS(以jqury为例,下面也是): $.ajax({ url:"url"...

月守护的博客 1万+

13-Django的ajax请求,同步异步,登录案例,静态文件路径

ajax 异步的JavaScript,在不重新加载页面的情况下,对页面进行局部的刷新 $.ajax({ 'url':请求地址 ‘type’:请求方式 ‘dataType’:预期返回的数据格式,一般是json ‘data’:传递的参数 }).success(function(data){ //执行成功之后的回调函数 }) 浏览器前端通过ajax发起请求,Django后台返回json数据r...

spec_yue 2018

Django前端HTML通过JS实现表格可编辑,动态添加行,回车完成新建文件夹

版本: django:2.1.7 python:3.7 功能描述: 点击“新建文件夹”按钮,在table的末尾增加一行;单击页面的新增行,使单元格td变成可编辑状态;输入内容后,当单元格失去焦点时,保存输入的内容;回车后通过AJAX提交后台完成新建文件夹。 HTML部分代码,id="table2"和EditType="TextBox"后面需要用到。 <button class...

weixin_30359021的博客 2042

Django - Ajax分页

目前总结了2种方法: 1. Ajax 分页 尼玛各种google,stackoverflow,搞了好久才总结出这个,之前使用Pagination tag loading的方式不好用,并且不能进行ajax提交请求的页面无刷新的方式去分页 1.view.py 1 from django.core.paginator import Paginator, EmptyPage, PageNot...

weixin_34253126的博客 219

Django教程之Ajax页面无刷新数据回显

Django教程之Ajax页面无刷新数据回显 问题场景: 在日常工作中会涉及到好多查询信息,有根据手机号的,有根据人,还有一些是因场景而定的特殊查询,需要频繁的去数据库中写sql去查询,所有就想做一个运维小工具,让人使用起来更方便一些 前提条件: 工具查询列表(页面有点丑陋,回头再写个样式) 数据库结构: id,name,url为主要结构 其中url 目的为 相对应的html页面 比如:手机号 对应 phone.html 姓名 对应 name.html等 根据本地数据库中的数据,展示列表,然后点击进行不

SKY_PLA的博客 2205

Django基础之ajax

本篇主要用来记录django+ajax的一些用法以及注意点,Django使用ajax最大的一个用处,就是不用刷新整个页面的前提下,请求服务端内容来更改页面中某些元素的值。如果使用http请求,就必须重新加载一遍页面,而ajax可以只更改一部分内容。 django+ajax基础使用 模版页面 index.html <form> <input type="text" id="tn...

abc_soul的博客 5792
上一篇: MariaDB在外网授权的坑
下一篇: python程序的option
erlang_hell
博客等级 码龄14年 57粉丝 89原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值