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

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");
    });
  }

然后效果如图所示

读取中

 

读取完毕

 

 

 测试：

1.代码

<!DOCTYPE html>
<html>

<body>
    <textarea id="div1" style="width:1650px; height:740px" readonly>
</textarea>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        document.getElementById('div1').innerHTML = '读取中...';
        $(document).ready(function () {
            $.ajax({
                async: true, url: "text.txt", success: function (result) {
                    $("#div1").html(result);
                }
            });
        });
    </script>

</body>

</html>

2.test.txt

 

3.文件结构

 4.使用http-server启动一个服务后访问（详细参考：https://www.cnblogs.com/nolaaaaa/p/9126385.html）

参考：https://blog.csdn.net/princek123/article/details/82762083?utm_source=blogxgwz6 

 

posted @ 2021-03-25 16:36  vickylinj  阅读(4557)  评论(0)  编辑  收藏  举报