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之编写类之二方法
Oct 11 Python
动感网页相册 python编写简单文件夹内图片浏览工具
Aug 17 Python
Python中最大最小赋值小技巧(分享)
Dec 23 Python
Django rest framework实现分页的示例
May 24 Python
Python实现的个人所得税计算器示例
Jun 01 Python
使用Python监视指定目录下文件变更的方法
Oct 15 Python
python selenium firefox使用详解
Feb 26 Python
keras CNN卷积核可视化,热度图教程
Jun 22 Python
使用Python将语音转换为文本的方法
Aug 10 Python
通过代码实例解析Pytest运行流程
Aug 20 Python
Python实现Telnet自动连接检测密码的示例
Apr 16 Python
Python爬虫之爬取最新更新的小说网站
May 06 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数据库抽象层 PDO
2011/05/07 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
php文件缓存方法总结
2016/03/16 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python基于select实现的socket服务器
2016/04/13 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
Python中修改字符串的四种方法
2018/11/02 Python
解决Django连接db遇到的问题
2019/08/29 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
高一地理教学反思
2014/01/18 职场文书
义和团口号
2014/06/17 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
节电标语大全
2014/06/23 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
微信小程序实现录音Record功能
2021/05/09 Javascript
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
Python实现抖音热搜定时爬取功能
2022/03/16 Python