广告
返回顶部
首页 > 资讯 > 后端开发 > Python >django+js+ajax实现刷新页面的方法
  • 667
分享到

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

页面方法django 2022-06-04 18:06:53 667人浏览 八月长安

Python 官方文档:入门教程 => 点击学习

摘要

本文实例讲述了Django+js+ajax实现刷新页面的方法。分享给大家供大家参考,具体如下: 在服务器开发的时候,为了方便将服务器对外开一个接口来操作,可以使用djanGo制作网页,通过页面来操作服务器。

本文实例讲述了Django+js+ajax实现刷新页面的方法。分享给大家供大家参考,具体如下:

服务器开发的时候,为了方便将服务器对外开一个接口来操作,可以使用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串返回一个字串给前段来判断是否操作成功。

更多关于python相关内容感兴趣的读者可查看本站专题:《Python入门与进阶经典教程》、《Python编码操作技巧总结》、《Python图片操作技巧总结》、《Python数据结构与算法教程》、《Python Socket编程技巧总结》、《Python函数使用技巧总结》、《Python字符串操作技巧汇总》及《Python文件与目录操作技巧汇总》

希望本文所述对大家Python程序设计有所帮助。

--结束END--

本文标题: django+js+ajax实现刷新页面的方法

本文链接: https://www.lsjlt.com/news/13236.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • django+js+ajax实现刷新页面的方法
    本文实例讲述了django+js+ajax实现刷新页面的方法。分享给大家供大家参考,具体如下: 在服务器开发的时候,为了方便将服务器对外开一个接口来操作,可以使用django制作网页,通过页面来操作服务器。...
    99+
    2022-06-04
    页面 方法 django
  • JS实现返回上一页并刷新页面的方法分析
    要实现返回上一页并刷新页面,可以使用以下几种方法:1. 使用`history.back()`方法返回上一页,并在返回后使用`loca...
    99+
    2023-08-11
    JS
  • pushState实现Ajax无刷新页面切换
    可以通过使用pushState方法来实现Ajax无刷新页面切换。pushState方法可以向浏览器的历史记录中添加一个新的状态,并且...
    99+
    2023-08-15
    pushState
  • Ajax如何实现页面自动刷新
    这篇文章主要介绍了Ajax如何实现页面自动刷新,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Ajax简介:AJAX即“Asynchronous Javascript And ...
    99+
    2023-06-08
  • vue中实现页面刷新以及局部刷新的方法
    目录一.全页面刷新二、局部刷新三、应用场景总结一.全页面刷新 1.修改 App.vue,代码如下: <template> <div id="app"> ...
    99+
    2022-11-12
  • AJAX实现指定部分页面刷新效果
    本文实例为大家分享了AJAX实现指定部分页面刷新效果的具体代码,供大家参考,具体内容如下 这个例子使用了bootstrap,jQuery和NProgress进度条插件,事先需引入相关...
    99+
    2022-11-12
  • pushState怎么实现Ajax无刷新页面切换
    要实现Ajax无刷新页面切换,可以使用pushState方法来改变浏览器的URL,并通过Ajax加载新的内容。以下是一个简单的示例:...
    99+
    2023-08-15
    pushState Ajax
  • Ajax中怎么实现页面无刷新功能
    Ajax中怎么实现页面无刷新功能,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。ajax (ajax开发)AJAX即“Asynchronous ...
    99+
    2022-10-19
  • Vue实现页面的局部刷新(router-view页面刷新)
    利用Vue里面的provide+inject组合 首先需要修改App.vue。 <template> <!-- 公司管理 --> <di...
    99+
    2022-11-12
  • js刷新当前页面的5种方式
    1. 使用location.reload()方法刷新页面:可以通过调用window.location.reload()或者locat...
    99+
    2023-09-15
    JS
  • jQuery如何实现AJAX定时刷新局部页面
    这篇文章主要介绍了jQuery如何实现AJAX定时刷新局部页面,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。方法一:局部刷新我们讲述到最多的...
    99+
    2022-10-19
  • Ajax如何实现无闪烁定时刷新页面
    这篇文章主要介绍Ajax如何实现无闪烁定时刷新页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在Web开发中我们经常需要实现定时刷新某个页面:来保持session的值或者检查session的值是否为空(比如说防止同...
    99+
    2023-06-08
  • Ajax如何实现页面无刷新留言效果
    这篇文章将为大家详细讲解有关Ajax如何实现页面无刷新留言效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。利用Ajax实现页面无刷新留言效果实现效果前言:在百度贴吧,以及一些论坛中,当你回复或者评论完毕...
    99+
    2023-06-08
  • Ajax如何实现局部刷新的方法
    本篇内容主要讲解“Ajax如何实现局部刷新的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Ajax如何实现局部刷新的方法”吧!前言最近复习了一下jQuery的一些内容,特此整理一下一些能用的...
    99+
    2023-06-08
  • Angular刷新当前页面的方法
    这篇文章主要介绍Angular刷新当前页面的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Angular刷新当前页面的几种方法默认,当收到导航到当前URL的请求,Angular路由器会忽略。<a ...
    99+
    2023-06-14
  • html刷新页面的方法有哪些
    在HTML中,有几种方法可以刷新页面。以下是其中一些常见的方法:1. 使用JavaScript:使用`location.reload...
    99+
    2023-08-08
    html
  • Vue实现当前页面刷新的4种方法举例
    目录前言方法一:location.reload方法二:$router.go(0)方法三:provide、inject和$nextTick方法四:创建空白页总结前言 这两周在写一个后台...
    99+
    2023-05-18
    vue页面刷新方法 vue当前页面刷新 vue重新加载当前页面
  • pushState中怎么利用Ajax实现无刷新页面切换
    pushState中怎么利用Ajax实现无刷新页面切换,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。一、API1、pushSt...
    99+
    2022-10-19
  • PHP+Ajax如何解实现页面无刷新发表评论
    小编给大家分享一下PHP+Ajax如何解实现页面无刷新发表评论,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
  • js调用刷新界面的方法有哪些
    这篇文章主要介绍了js调用刷新界面的方法有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。示例代码如下<!DOCTYPE ...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作