快捷導(dǎo)航

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

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

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

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

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

1、在原頁(yè)面中設(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，從而局部修改頁(yè)面，展示進(jìn)程信息。

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

您可能感興趣的文章:

相關(guān)文章

python 中的列表解析和生成表達(dá)式
優(yōu)雅、清晰和務(wù)實(shí)都是python的核心價(jià)值觀，如果想通過(guò)操作和處理一個(gè)序列（或其他的可迭代對(duì)象）來(lái)創(chuàng)建一個(gè)新的列表時(shí)可以使用列表解析（ List comprehensions）和生成表達(dá)式，通過(guò)這兩個(gè)操作，我們可以看到這三個(gè)觀點(diǎn)是如何在python中和諧統(tǒng)一起來(lái)的。
2011-03-03
Python高效解析和操作XML/HTML的實(shí)用指南
在?Python?生態(tài)系統(tǒng)中,lxml?是一個(gè)功能強(qiáng)大且廣泛使用的庫(kù),用于高效地解析和操作?XML?和?HTML?文檔,這篇文章從?lxml?的基礎(chǔ)安裝開(kāi)始,逐步深入講解如何解析文檔、提取數(shù)據(jù)、修改文檔結(jié)構(gòu),并涵蓋了處理大型文檔和使用命名空間等進(jìn)階操作,需要的朋友可以參考下
2024-10-10
python 基于空間相似度的K-means軌跡聚類的實(shí)現(xiàn)
這篇文章主要介紹了python 基于空間相似度的K-means軌跡聚類的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
Python通過(guò)類的組合模擬街道紅綠燈
這篇文章主要介紹了Python通過(guò)類的組合模擬街道紅綠燈,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
在scrapy中使用phantomJS實(shí)現(xiàn)異步爬取的方法
今天小編就為大家分享一篇在scrapy中使用phantomJS實(shí)現(xiàn)異步爬取的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
Sanic框架Cookies操作示例
這篇文章主要介紹了Sanic框架Cookies操作,結(jié)合實(shí)例形式分析了Sanic框架cookie讀取、寫入及刪除等簡(jiǎn)單操作技巧,需要的朋友可以參考下
2018-07-07
用Python實(shí)現(xiàn)一本個(gè)性化日歷
大家好，本篇文章主要講的是用Python實(shí)現(xiàn)一本個(gè)性化日歷，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下
2022-02-02
Python遍歷某目錄下的所有文件夾與文件路徑
這篇文章主要介紹了Python遍歷某目錄下的所有文件夾與文件路徑以及輸出中文亂碼問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-03-03
從零學(xué)python系列之教你如何根據(jù)圖片生成字符畫
網(wǎng)上有很多的字符畫，看起來(lái)很炫酷，下面就告訴你如何用Python做這么炫酷的事，
2014-05-05
在keras里實(shí)現(xiàn)自定義上采樣層
這篇文章主要介紹了在keras里實(shí)現(xiàn)自定義上采樣層，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-06-06