django html 刷新列表,django js实现部分页面刷新的示例代码

例子中,我用的是显示机器上的进程信息的表格,获取不同的机器的进程信息时,更新这个展示信息的表格,如下:

dcf4aadb4a5915aeb48080889e57b9f1.png

当我在输入框中输入ip时,我希望只是更新这个表格,页面其他部分不变,实现方式如下:

1、在原页面中设置这个表格的id为pstable

userpidcmd

{% for ps in info.ps_data %}

{% for item in ps %}

{{ item }}

{% endfor %}

{% endfor %}

2、实现js

$(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代码

userpidcmd

{% for ps in info.ps_data %}

{% for item in ps %}

{{ item }}

{% endfor %}

{% endfor %}

当点击按钮查询指定ip的进程信息时,process()会判断这个ip的存在,如果这个ip存在,会将pstable.html保存到js函数中的data参数,然后js参数会调用回调函数,将id为pstable的tag的html替换为参数data保存的html,即pstable.html,从而局部修改页面,展示进程信息。

以上这篇django js实现部分页面刷新的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现这个功能,你可以按照以下步骤进行操作: 1. 安装 django-adminlte2 插件,在 Django 项目引入 AdminLTE2 主题。 2. 在 HTML 引入 jQuery 库和 AdminLTE2 的相关脚本和样式文件。 3. 编写 HTML 页面,添加一个输入框和一个按钮,用于触发查询操作。 4. 使用 jQuery 实现模糊查询功能,当用户在输入框输入关键字时,使用 AJAX 发送请求到后端,并将查询结果显示在页面上。 5. 添加一个刷新按钮,当用户点击该按钮时,刷新整个页面。 以下是基本的代码示例: ```html <!-- 引入 jQuery 库和 AdminLTE2 的相关脚本和样式文件 --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="{% static 'adminlte/css/adminlte.min.css' %}"> <script src="{% static 'adminlte/js/adminlte.min.js' %}"></script> <!-- 编写 HTML 页面 --> <input type="text" id="search" placeholder="请输入关键字"> <button id="btn-search">查询</button> <button id="btn-refresh">刷新</button> <div id="result"></div> <!-- 使用 jQuery 实现模糊查询功能 --> <script> $(document).ready(function() { $('#btn-search').click(function() { var keyword = $('#search').val(); $.ajax({ type: 'GET', url: '/search/', data: {'keyword': keyword}, success: function(response) { $('#result').html(response); } }); }); // 添加刷新按钮 $('#btn-refresh').click(function() { location.reload(); }); }); </script> ``` 在 Django ,你需要编写一个视图函数来处理查询请求,如下所示: ```python from django.shortcuts import render def search(request): keyword = request.GET.get('keyword') # 处理查询逻辑,返回查询结果 return render(request, 'result.html', {'result': result}) ``` 这里假设查询结果已经被渲染到了名为 `result.html` 的模板。当查询成功后,模板会被渲染,并将查询结果返回给前端页面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值