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 相关文章推荐
Python3读取zip文件信息的方法
May 22 Python
python学习之面向对象【入门初级篇】
Jan 21 Python
初学python的操作难点总结(新手必看篇)
Aug 03 Python
pandas 小数位数 精度的处理方法
Jun 09 Python
python微信好友数据分析详解
Nov 19 Python
python接口自动化测试之接口数据依赖的实现方法
Apr 26 Python
浅谈Python 递归算法指归
Aug 22 Python
python标准库sys和OS的函数使用方法与实例详解
Feb 12 Python
PyTorch加载自己的数据集实例详解
Mar 18 Python
django 链接多个数据库 并使用原生sql实现
Mar 28 Python
浅析NumPy 切片和索引
Sep 02 Python
python中Matplotlib绘制直线的实例代码
Jul 04 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生成静态页面详解
2006/11/19 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
使用Python生成XML的方法实例
2017/03/21 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
端口镜像是怎么实现的
2014/03/25 面试题
学生自我鉴定模板
2013/12/30 职场文书
入党自我评价优缺点
2014/01/25 职场文书
员工安全责任书范本
2014/07/24 职场文书
单位未婚证明范本
2014/11/25 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
办公室岗位职责范本
2015/04/11 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
Python中的套接字编程是什么?
2021/06/21 Python