django js實(shí)現(xiàn)部分頁面刷新的示例代碼
例子中,我用的是顯示機(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)部分頁面刷新的示例代碼就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- django實(shí)現(xiàn)分頁的方法
- Django實(shí)現(xiàn)快速分頁的方法實(shí)例
- Django自定義分頁與bootstrap分頁結(jié)合
- Django實(shí)現(xiàn)簡(jiǎn)單分頁功能的方法詳解
- Django原生sql也能使用Paginator分頁的示例代碼
- Django自定義分頁效果
- Django分頁查詢并返回jsons數(shù)據(jù)(中文亂碼解決方法)
- 在django中使用自定義標(biāo)簽實(shí)現(xiàn)分頁功能
- django之session與分頁(實(shí)例講解)
- Django如何自定義分頁
- Django框架實(shí)現(xiàn)的分頁demo示例
相關(guān)文章
Python高效解析和操作XML/HTML的實(shí)用指南
在?Python?生態(tài)系統(tǒng)中,lxml?是一個(gè)功能強(qiáng)大且廣泛使用的庫,用于高效地解析和操作?XML?和?HTML?文檔,這篇文章從?lxml?的基礎(chǔ)安裝開始,逐步深入講解如何解析文檔、提取數(shù)據(jù)、修改文檔結(jié)構(gòu),并涵蓋了處理大型文檔和使用命名空間等進(jìn)階操作,需要的朋友可以參考下2024-10-10python 基于空間相似度的K-means軌跡聚類的實(shí)現(xiàn)
這篇文章主要介紹了python 基于空間相似度的K-means軌跡聚類的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03在scrapy中使用phantomJS實(shí)現(xiàn)異步爬取的方法
今天小編就為大家分享一篇在scrapy中使用phantomJS實(shí)現(xiàn)異步爬取的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-12-12用Python實(shí)現(xiàn)一本個(gè)性化日歷
大家好,本篇文章主要講的是用Python實(shí)現(xiàn)一本個(gè)性化日歷,感興趣的同學(xué)趕快來看一看吧,對(duì)你有幫助的話記得收藏一下2022-02-02從零學(xué)python系列之教你如何根據(jù)圖片生成字符畫
網(wǎng)上有很多的字符畫,看起來很炫酷,下面就告訴你如何用Python做這么炫酷的事,2014-05-05