Vue直接读取服务器文件并显示的方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/princek123/article/details/82762083

这里我们的想法是点开页面，自动读取服务器某个文件，然后在文本框显示出来

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行，所以该原子操作必须一次性执行完。