有一个这样的需求,并且最后要求是可点击的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\"></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\"></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文件,提示跨域的原因和解决方法