如何实现html静态文件通过本地文件获取数据

有一个这样的需求,并且最后要求是可点击的html静态文件,不要链接数据库
在这里插入图片描述

由于前端接触不多,最开始就尝试了一下之前比较熟练的ajax

        var data = 0;
        $.ajax({
            url: '../sys.log',
            type: 'GET',
            data: data,
            async:true,    //是否异步
            dataType:"jsonp",    //跨域json请求一定是jsonp
            // jsonp: "callbackparam",    //跨域请求的参数名,默认是callback
            //jsonpCallback:"successCallback",    //自定义跨域参数值,回调函数名也是一样,默认为jQuery自动生成的字符串
            // data:{"query":"civilnews"},    //请求参数
            // headers:{//请求头
            //     'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
            // },
            headers:{//请求头
                'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
            },
            success :function (data) {//这里的请求发送到服务器(控制器里
                // alert(data);
                var str=new String();
                var arr=new Array();
                str=data;
                //可以用字符或字符串分割
                arr=str.split('\n');
                var li_str = "";
                for(var i=0;i<arr.length;i++)
                {
                    // alert(i+arr[i]);
                    li_str = li_str+"<li class=\"layui-timeline-item\">\n" +
                        "                              <i class=\"layui-icon layui-timeline-axis\">&#xe63f;</i>\n" +
                        "                              <div class=\"layui-timeline-content layui-text\">\n" +
                        "                                <h3 class=\"layui-timeline-title\">2019-03-3"+i+"</h3>\n" +
                        "                                <p>\n" +
                        arr[i]+
                        "\n" +
                        "                                </p>\n" +
                        "                              </div>\n" +
                        "                            </li>";
                }
                $("#ul_for").html(li_str);
            },
        });

然后发现从idea中直接打开可以,但是并不能通过静态文件读取到数据。
以为在idea中会自动把请求的地址变为http://localhost:63342/templates/system/log.html?
然而通过本地打开时是
file:///D:/1waibao/java-shop/shop-main/src/main/resources/templates/system/log.html
错误信息Access to XMLHttpRequest at 啊 from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
由于通过链接直接访问本地文件被浏览器识别为十分危险的行为,好像就禁用了(火狐没有禁用),所以不通过服务器的话是没法用ajax访问的。


于是使用jsonp

    <script>
        function dataJson(data) {
            console.log(data);
            //
            // alert(data.data[0].content);
            // alert(data.data[1].content);
            // alert(data.data[2].content);
            //
                    var li_str = "";

            for(var i=0;i<data.data.length;i++)
                {
                    // alert(i+arr[i]);
                    li_str = li_str+"<li class=\"layui-timeline-item\">\n" +
                        "                              <i class=\"layui-icon layui-timeline-axis\">&#xe63f;</i>\n" +
                        "                              <div class=\"layui-timeline-content layui-text\">\n" +
                        "                                <h3 class=\"layui-timeline-title\">"+data.data[i].date+"</h3>\n" +
                        "                                <p>\n" +
                        data.data[i].content+
                        "\n" +
                        "                                </p>\n" +
                        "                              </div>\n" +
                        "                            </li>";
                }
                $("#ul_for").html(li_str);
        }
    </script>
    <!-- 引入要放在后面 -->
    <script type="text/javascript" src="../sys.log?cb=dataJson"></script>

//文件数据以及格式
dataJson({
  "status": "success",
  "data": [
    {
    "date": "2015-01-04",
    "content": "hello world"
    },
    {
      "date": "2015-01-11",
      "content": "这是sys.log的第二行"
    },
    {
      "date": "2015-01-18",
      "content": "这是sys.log的第三行"
    }
  ]
})

成功获取
在这里插入图片描述

最关键的参考代码通过Ajax读取本地json文件,提示跨域的原因和解决方法

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值