Vue直接讀取伺服器檔案並顯示的方法
阿新 • • 發佈:2018-11-21
這裡我們的想法是點開頁面,自動讀取伺服器某個檔案,然後在文字框顯示出來
HTML程式碼
<textarea id = "div1" style="width:1650px; height:740px" readonly>
</textarea>
JS程式碼
這裡試用了兩種方法都可以
1.ajax
mounted() { document.getElementById('div1').innerHTML = '讀取中...'; $(document).ready(function(){ $.ajax({async: true, url:"dhcpdlog",success:function(result){ $("#div1").html(result); }}); }); }
2.load
mounted() {
// this.getInfo()
document.getElementById('div1').innerHTML = '讀取中...';
$(document).ready(function(){
$("#div1").load("/arplog");
});
}
然後效果如圖所示
讀取中
讀取完畢
本來是採用load的方法,後來發現在讀取文件的過程中,游標會變成白色小手,然後點選其他事件不會立即觸發,直到讀取完畢才會執行。於是試著採取能非同步操作的ajax方法,但結果還是出現這種情況。然後看Network發現這裡讀取資料用的是get方法,而且資料量較大約5w行,所以該原子操作必須一次性執行完。