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 08 Python
初步介绍Python中的pydoc模块和distutils模块
Apr 13 Python
判断网页编码的方法python版
Aug 12 Python
matlab中实现矩阵删除一行或一列的方法
Apr 04 Python
基于pip install django失败时的解决方法
Jun 12 Python
python读取和保存图片5种方法对比
Sep 12 Python
使用APScheduler3.0.1 实现定时任务的方法
Jul 22 Python
python multiprocessing模块用法及原理介绍
Aug 20 Python
Python通过cv2读取多个USB摄像头
Aug 28 Python
解决Python中回文数和质数的问题
Nov 24 Python
Python While循环语句实例演示及原理解析
Jan 03 Python
pycharm如何实现跨目录调用文件
Feb 28 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使用curl实现简单模拟提交表单功能
2017/05/15 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
express的中间件cookieParser详解
2014/12/04 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
python简单读取大文件的方法
2016/07/01 Python
python学习开发mock接口
2019/04/28 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
Python序列类型的打包和解包实例
2019/12/21 Python
Python递归实现打印多重列表代码
2020/02/27 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
简单了解Django项目应用创建过程
2020/07/06 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
区域总监的岗位职责
2013/11/21 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
教师工作表现自我评价
2015/03/05 职场文书
学校运动会开幕词
2016/03/03 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android