快捷導(dǎo)航

django js實(shí)現(xiàn)部分頁面刷新的示例代碼

更新時(shí)間：2018年05月28日 10:25:16 作者：云中不知人

今天小編就為大家分享一篇django js實(shí)現(xiàn)部分頁面刷新的示例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

例子中，我用的是顯示機(jī)器上的進(jìn)程信息的表格，獲取不同的機(jī)器的進(jìn)程信息時(shí)，更新這個(gè)展示信息的表格，如下：

當(dāng)我在輸入框中輸入ip時(shí)，我希望只是更新這個(gè)表格，頁面其他部分不變，實(shí)現(xiàn)方式如下：

1、在原頁面中設(shè)置這個(gè)表格的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、實(shí)現(xiàn)js

<script type="text/javascript"> 
$(document).ready(function(){ 
 $("#gobtn").click(function(){ 
 var ip=$("#ip").val(); //獲取輸入框中的ip 
 $.post("/process/",{'hostip':ip}, //post函數(shù)到后端 
 function(data,status){ //回調(diào)函數(shù) 
 $("#pstable").html(data); //將id為pstable的標(biāo)簽的html替換為返回的data 
 $("#ip").val(ip) //將輸入框的值改為查詢的ip 
 }); 
}); 
});

3、view函數(shù)

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 在這個(gè)html定義好要根據(jù)ip獲取到進(jìn)程信息后的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>

當(dāng)點(diǎn)擊按鈕查詢指定ip的進(jìn)程信息時(shí)，process()會(huì)判斷這個(gè)ip的存在，如果這個(gè)ip存在，會(huì)將pstable.html保存到j(luò)s函數(shù)中的data參數(shù)，然后js參數(shù)會(huì)調(diào)用回調(diào)函數(shù)，將id為pstable的tag的html替換為參數(shù)data保存的html，即pstable.html，從而局部修改頁面，展示進(jìn)程信息。

以上這篇django js實(shí)現(xiàn)部分頁面刷新的示例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: