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标准库与第三方库详解
Jul 22 Python
Python map和reduce函数用法示例
Feb 26 Python
在Python中使用SimpleParse模块进行解析的教程
Apr 11 Python
你所不知道的Python奇技淫巧13招【实用】
Dec 14 Python
Python利用matplotlib生成图片背景及图例透明的效果
Apr 27 Python
简单了解Django模板的使用
Dec 20 Python
Python 绘图库 Matplotlib 入门教程
Apr 19 Python
NumPy 基本切片和索引的具体使用方法
Apr 24 Python
python Elasticsearch索引建立和数据的上传详解
Aug 04 Python
使用python和pygame制作挡板弹球游戏
Dec 03 Python
centos7中安装python3.6.4的教程
Dec 11 Python
python BeautifulSoup库的安装与使用
Dec 17 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算开始时间到过期时间的相隔的天数
2011/01/12 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
对python Tkinter Text的用法详解
2018/10/11 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
HTML的form表单和django的form表单
2019/07/25 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
高三毕业寄语
2014/04/10 职场文书
家长写给孩子的评语
2014/04/18 职场文书
励志演讲稿300字
2014/08/21 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
暂住证证明
2015/06/19 职场文书
同事去世追悼词
2015/06/23 职场文书
社区干部培训心得体会
2016/01/06 职场文书