当前位置:主页 > jquery教程 > 解决ajax不能访问本地文件问题(利用js跨域原理)

js解决ajax读取本地文件时跨域问题

发布:2020-02-09 17:41:35 62


本站收集了一篇jQuery相关的编程文章,网友庄梅花根据主题投稿了本篇教程内容,涉及到ajax、js跨域原理、解决ajax不能访问本地文件问题(利用js跨域原理)相关内容,已被535网友关注,涉猎到的知识点内容可以在下方电子书获得。

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

博主自己在开发一个无后台,只有前台的查询系统时,遇到一个困难,如何利用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>"; 
      /

参考资料

相关文章

  • 仿iframe效果Aajx文件上传实例

    发布:2023-01-16

    给网友朋友们带来一篇关于jQuery的教程,下面小编就为大家带来一篇仿iframe效果Aajx文件上传实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 实例解析jquery ajax jsonp跨域调用

    发布:2020-03-16

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友


  • Thinkphp框架表单ajax自动验证登录注册功能

    发布:2019-06-06

    这篇文章主要介绍了Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下


  • jQuery基于ajax对json操作的实例

    发布:2020-05-21

    这篇文章主要介绍了jQuery基于ajax操作json数据的方法,结合简单实例形式分析了jQuery的ajax基本使用方法及json数据传输操作相关技巧,需要的朋友可以参考下


  • 解析jquery Ajax 实现加载数据前动画效果

    发布:2020-01-27

    本篇文章主要是对jquery Ajax实现加载数据前动画效果的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助


  • 如何使用jQuery+ajax实现鼠标单击修改内容

    发布:2020-03-01

    这篇文章主要介绍了jQuery+ajax实现鼠标单击修改内容的方法,需要的朋友可以参考下


  • JavaScript AJAX原理知识点

    发布:2020-01-20

    本文主要介绍了JavaScript中的AJAX的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧


  • jQuery遍历json的实例代码

    发布:2019-12-17

    这篇文章主要介绍了jQuery遍历json的方法的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下


网友讨论