解决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 相关文章推荐
改善用户体验的五款jQuery插件分享
May 22 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
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
Sony CFR 320 修复改造
2020/03/14 无线电
escape unescape的php下的实现方法
2007/04/27 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
python开启多个子进程并行运行的方法
2015/04/18 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
狼和鹿教学反思
2014/02/05 职场文书
助学贷款贫困证明
2014/09/23 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
老龙头导游词
2015/02/11 职场文书
离婚上诉状范文
2015/05/23 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript
在CSS中使用when/else的方法
2022/01/18 HTML / CSS