django js实现部分页面刷新的示例代码


Posted in Python onMay 28, 2018

例子中,我用的是显示机器上的进程信息的表格,获取不同的机器的进程信息时,更新这个展示信息的表格,如下:

django js实现部分页面刷新的示例代码

当我在输入框中输入ip时,我希望只是更新这个表格,页面其他部分不变,实现方式如下:

1、在原页面中设置这个表格的id为pstable

<table class="table table-striped" id="pstable">
 <thead>
 <tr>
  <th>user</th>
  <th>pid</th>
  <th>cmd</th>
 </tr>
 </thead>
 <tbody>
 {% for ps in info.ps_data %}
 <tr>
  {% for item in ps %}
  <td>{{ item }}</td>
  {% endfor %}
 </tr>
 {% endfor %}
 </tbody>
 </table>

2、实现js

<script type="text/javascript"> 
$(document).ready(function(){ 
 $("#gobtn").click(function(){ 
 var ip=$("#ip").val(); //获取输入框中的ip 
 $.post("/process/",{'hostip':ip}, //post函数到后端 
 function(data,status){ //回调函数 
 $("#pstable").html(data); //将id为pstable的标签的html替换为返回的data 
 $("#ip").val(ip) //将输入框的值改为查询的ip 
 }); 
}); 
});

3、view函数

def process_view(request): 
 hostip = request.POST.get('hostip') 
 logger.debug("host:%s" % hostip) 
 if hostip is None: 
 ps_data = GetHostPs('192.168.163.128') 
 info = {'username':request.user,'ps_data':ps_data} 
 template = 'process.html' 
 #return render(request,'process.html',{"info":info}) 
 elif hostip: 
 ps_data = GetHostPs(hostip) 
 info = {'username':request.user,'ps_data':ps_data} 
 template = 'pstable.html' 
 #return render(request,'pstable.html',{"info":info}) 
 else: 
 ps_data = GetHostPs('192.168.163.128') 
 info = {'username':request.user,'ps_data':ps_data} 
 template = 'pstable.html' 
 return render(request,template,{"info":info})

4、pstable.html 在这个html定义好要根据ip获取到进程信息后的html代码

<thead> 
 <tr> 
  <th>user</th> 
  <th>pid</th> 
  <th>cmd</th> 
 </tr> 
 </thead> 
 <tbody> 
 {% for ps in info.ps_data %} 
 <tr> 
  {% for item in ps %} 
  <td>{{ item }}</td> 
  {% endfor %} 
 </tr> 
 {% endfor %} 
 <tbody>

当点击按钮查询指定ip的进程信息时,process()会判断这个ip的存在,如果这个ip存在,会将pstable.html保存到js函数中的data参数,然后js参数会调用回调函数,将id为pstable的tag的html替换为参数data保存的html,即pstable.html,从而局部修改页面,展示进程信息。

以上这篇django js实现部分页面刷新的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python使用Flask框架获取用户IP地址的方法
Mar 21 Python
Python实现给文件添加内容及得到文件信息的方法
May 28 Python
wxPython使用系统剪切板的方法
Jun 16 Python
python 回调函数和回调方法的实现分析
Mar 23 Python
python实现简单神经网络算法
Mar 10 Python
python+pandas分析nginx日志的实例
Apr 28 Python
python调用动态链接库的基本过程详解
Jun 19 Python
Python imutils 填充图片周边为黑色的实现
Jan 19 Python
解决python Jupyter不能导入外部包问题
Apr 15 Python
python中JWT用户认证的实现
May 18 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
Jan 24 Python
Python 文本滚动播放器的实现代码
Apr 25 Python
Django项目中用JS实现加载子页面并传值的方法
May 28 #Python
Python面向对象类继承和组合实例分析
May 28 #Python
django传值给模板, 再用JS接收并进行操作的实例
May 28 #Python
Django处理文件上传File Uploads的实例
May 28 #Python
python3.4实现邮件发送功能
May 28 #Python
解决Django的request.POST获取不到内容的问题
May 28 #Python
Django后台获取前端post上传的文件方法
May 28 #Python
You might like
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
flash用php连接数据库的代码
2011/04/21 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
php构造函数实例讲解
2013/11/13 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
JavaScript 调试器简介
2009/02/21 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Django工程的分层结构详解
2019/07/18 Python
Python使用python-docx读写word文档
2019/08/26 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
音乐学专业求职信
2014/07/22 职场文书
住房抵押登记委托书
2014/09/27 职场文书
植树节新闻稿
2015/07/17 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
vue 实现上传组件
2021/05/31 Vue.js
java版 简单三子棋游戏
2022/05/04 Java/Android