????本節我們接著開發首頁，

主要內容是 讓左側的請求記錄和右側的請求模塊 聯動起來。

具體聯動需求：

?右側請求一次之后，左側生成記錄

點擊左側記錄，右側則會顯示這次記錄的請求數據

我們本節課的內容是想辦法實現1-生成記錄。

????我們知道，左側的記錄是存在于我們數據庫的記錄表中，所以右側請求模塊只要請求，就順便把這些請求數據+用戶id 存儲到記錄表中即可。但是左側的記錄顯示邏輯目前是，進入首頁后自動獲取展示，并沒有實時刷新功能，也就是我們請求完之后，需要刷新頁面才能在左側看到記錄，但是刷新的話右側的返回體什么的也煙消云散了。那么我們就要重新設計這個左側記錄的展示邏輯，做成主動刷新。

????一開始進到home的展示我們不用刪除了，只做后續請求成功后的刷新吧

打開home.html,新建立一個js函數：

????這個函數要做的事有兩個：

1.清空已顯示的記錄

2.從數據庫獲取最新的記錄生成展示

我們現在先去架設好獲取最新記錄的 urls.py：

然后去寫views.py：

????這里要特別說一下為什么這樣寫，我們只從數據庫拿出id,method，host,url四個字段，其他的不要拿，因為都拿的話肯定數據太大超出了。我們只拿這幾樣需要顯示的即可。等用戶真的去點擊某個記錄的時候，我們在用這個記錄的id單獨去后臺數據庫獲取全部請求數據就行。

????然后我們回過頭，打開home.html,輸出一下ret，看看對不對。

還有我們要加上一個調用這個函數的代碼，才能調試：

好讓我們重啟服務，打開瀏覽器控制臺的-console，刷新首頁看看輸出吧：

看來是獲取成功了。

接下來就是生成：

我們要用js代碼，實現這個html語言的循環。

代碼如下：

log_refersh()function log_refersh() { //清空 div = document.getElementById('home_log_plan'); div.innerHTML = ''; // 生成新的 $.get('/get_home_log/',{ },function (ret) { //ret 應該就是我們獲取到的記錄列表數組 的字符串形式 // 這里寫生成展示的代碼 console.log(ret); var res = eval(ret); var all_logs = res.all_logs; for(var i=0; i var a =document.createElement('a') ;//創建a標簽 a.href="javascript:home_log_show()" ; // 點擊函數 a.style="text-decoration: none" ; a.class = 'log'; var s = document.createElement('span'); //聲明顯示請求體類型的span s.style = "font-size: large;color: black"; s.innerText = all_logs[i].api_method+' - '; //設定這個method; var s2 = document.createElement('span'); // 聲明存放host+url的span s2.innerText = all_logs[i].api_host+all_logs[i].api_url; a.appendChild(s); a.appendChild(s2); div.appendChild(a); div.appendChild(document.createElement('br')); } })}

看看效果：

還是可以接受的。

接下來就是我們要在右側進行請求后，把請求數據存放到數據記錄表中，然后再調用一下這個刷新log函數即可：

打開views.py，找到Api_send_home()，加入下圖紅框內容，位置別弄錯了。

然后在home.html中?的函數最后獲取到返回結果的時候 加入調用記錄刷新函數log_refersh，注意之前我們為了方便調試的那個一進頁面就刷新的調用代碼行可以刪掉了。

????然后重啟服務刷新頁面 ，隨便請求點什么 看看效果。

看來這個是成功了。但是還有瑕疵，比如新顯示的應該在最上面，順序反了。我們在后臺函數，首次進入和send請求的倆個位置逆轉即可：

views.py中修改：

好了，這樣順序就方便了。到這就完成了今天的內容。

小伙伴可以在自行修飾。

歡迎關注和分享～ 你們的飯飯

總結

以上是生活随笔為你收集整理的html div分钟刷新一次啊代码_接口测试平台代码实现57首页重构5的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。