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设计模式之单例模式实例
Apr 26 Python
Python编写百度贴吧的简单爬虫
Apr 02 Python
Python聊天室实例程序分享
Jan 05 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
Jun 21 Python
对Python定时任务的启动和停止方法详解
Feb 19 Python
Python 一键制作微信好友图片墙的方法
May 16 Python
使用Fabric自动化部署Django项目的实现
Sep 27 Python
手动安装python3.6的操作过程详解
Jan 13 Python
Python networkx包的实现
Feb 14 Python
Python如何实现小程序 无限求和平均
Feb 18 Python
Python使用pyexecjs代码案例解析
Jul 13 Python
python3实现无权最短路径的方法
May 12 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&amp;&amp;mysql)二
2006/10/09 PHP
PHP基础知识回顾
2012/08/16 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
Yii框架安装简明教程
2020/05/15 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
轻松掌握JavaScript策略模式
2016/08/25 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python清除字符串里非数字字符的方法
2015/07/02 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
如何用python处理excel表格
2020/06/09 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
印度网上药店:1mg
2017/10/13 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
敬老文明号事迹材料
2014/01/16 职场文书
教师对学生的评语
2014/04/28 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
煤矿安全保证书
2015/02/27 职场文书
教学反思怎么写
2016/02/24 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python