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实现将不规范的英文名字首字母大写
Nov 15 Python
浅谈Python peewee 使用经验
Oct 20 Python
实例讲解Python3中abs()函数
Feb 19 Python
Python高级特性与几种函数的讲解
Mar 08 Python
pytorch获取模型某一层参数名及参数值方式
Dec 30 Python
pytorch AvgPool2d函数使用详解
Jan 03 Python
python输出pdf文档的实例
Feb 13 Python
一文解决django 2.2与mysql兼容性问题
Jul 15 Python
Pandas对每个分组应用apply函数的实现
Dec 13 Python
python+selenium爬取微博热搜存入Mysql的实现方法
Jan 27 Python
一文带你掌握Pyecharts地理数据可视化的方法
Feb 06 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
Feb 07 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
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
树结构之JavaScript
2017/01/24 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python字符串详细介绍
2015/05/09 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
Python callable()函数用法实例分析
2018/03/17 Python
python斐波那契数列的计算方法
2018/09/27 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
python创建文本文件的简单方法
2020/08/30 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
运动会拉拉队口号
2014/06/09 职场文书
员工考勤管理制度
2015/08/06 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang