解决ajax不能访问本地文件问题(利用js跨域原理)


Posted in Javascript onJanuary 24, 2017

博主自己在开发一个无后台,只有前台的查询系统时,遇到一个困难,如何利用Ajax读取自己的本地json文件,百度、谷歌了下,发现大部分文章都是在说修改浏览器参数,但是自己想想,用户在使用时,还要修改浏览器的参数,这样显然降低了用户体验。自己琢磨了一段时间,发现可以利用js跨域原理来解决这个瓶颈。将之前要读取的json文件,变为js对象文件,这样就可以读取这个文件,然后写一个函数来对这个js对象进行解析。

首先说明下js跨域原理和jsonp这个技术(如果说的不详细,可自行百度、谷歌)

src可以跨域请求,但是这个资源不能作为js解析,资源不是js,所以解析json的时候会出错

中间是一个对象,调用fun把这个对象传入进去,

定义的function fun可以看作是请求成功后回调函数

jsonp本质:是通过script标签跨域,来突破跨域限制请求;返回的数据中用一个函数来包装起来

jsonp是用来解决js跨域请求数据的问题,原理:是通过script标签可以跨域请求资源的原理间接的请求数据。

jsonp需要满足3个条件:

1、通过script的src请求资源

2、请求的资源中用回调函数的将数据进行包裹

3、调用方要定义回调函数

下面贴入demo来演示Ajax读取本地文件,ps:在没有服务器的情况下

解决ajax不能访问本地文件问题(利用js跨域原理)

下面是上面html页面打开效果图(为了说明成功读取本地文件)

解决ajax不能访问本地文件问题(利用js跨域原理)

贴入上面的test.html代码

<script type="text/javascript" src="js/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script> 
<script> 
  function fun(data){ 
 
 
      //var dataj=JSON.parse(data.pro); //可以将json字符串转换成json对象  
       alert(data.pro); 
      var obj = eval(data.pro);  
      //alert(obj.name); 
      //$.each(obj,function(index,position){ 
        //alert(+position['name']); 
            //html+="<option value='"+position['name']+"'>"+position["name"]+"</option>"; 
      //}); 
      for(var i=0;i<obj.length;i++){ 
         alert(obj[i].name); 
      } 
      alert(1); 
 
    } 
</script>
/*下面的代码,是之前利用ajax来读取本地json文件的代码,是不能实现的,运行时,可以不贴入下面的代码*/ 
<script type="text/javascript" src="json/abc.json"></script> 
<script> 
  $(function(){ 
    alert($); 
    /*$.ajax({ 
     type: "GET", 
     url: "json/positionMenu.json", 
     dataType: "json", 
     success:function(data){ 
         alert(data); 
      } 
    });*/ 
 
  }) 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
Jquery树插件zTree实现菜单树
Jan 24 #Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 #Javascript
树结构之JavaScript
Jan 24 #Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 #Javascript
javascript 正则表达式去空行方法
Jan 24 #Javascript
JavaScript中动态向表格添加数据
Jan 24 #Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 #Javascript
You might like
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
vue多次循环操作示例
2019/02/08 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
跟老齐学Python之做一个小游戏
2014/09/28 Python
python实现用户答题功能
2018/01/17 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
体育教师自我鉴定
2014/02/12 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
推销搭讪开场白
2015/05/28 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL