在客户端读取后台的json文件,使用jquery的$.getJSON,读取后台文件内容。

jQuery中的$.getJSON( )方法函数主要用来从服务器加载json编码的数据,它使用的是GET HTTP请求。使用方法如下:

$.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

url是必选参数,表示json数据的地址;
data是可选参数,用于请求数据时发送数据参数;
success是可参数,这是一个回调函数,用于处理请求到的数据。

$(function(){
$("#btn").click(function(){
$.getJSON("userinfo.json",function(data){
var $jsontip = $("#jsonTip");
var strHtml = "123";//存储数据的变量
$jsontip.empty();//清空内容
$.each(data,function(infoIndex,info){ //$.each()遍历,infoIndex,info index - 选择器的 index 位置  element - 当前的元素(也可使用 "this" 选择器)

})
$jsontip.html(strHtml);//显示处理后的数据
})
})
})
</script>

但是在本地运行时出现错误啦

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

这个错误是浏览器不允许js打开本地文件,这很容易理解嘛,处于安全考虑啦。因为没开服务器,只是简单的打开网页,因此会出错。

最新文章

  1. AngularJS使用指南
  2. php date函数 参数详细
  3. [双连通分量] POJ 3177 Redundant Paths
  4. 用实体框架搭建MVC程序框架(全部)
  5. Linux性能监控的几个工具(转)
  6. QT:QBitArray
  7. 通过dblink impdp导入
  8. Android应用程序组件Content Provider应用实例
  9. hdoj 2121 Ice_cream’s world II 【没有最低树的根节点】
  10. Spring源码情操陶冶-AbstractApplicationContext#obtainFreshBeanFactory
  11. ArrayList在foreach正常迭代删除不报错的原因
  12. C#编译器优化那点事
  13. Docker操作笔记(三)数据管理
  14. hbuilder中的wap2app (将M站快速转换成App的开发框架)使用过程有关原生标题的关闭
  15. 如何在集合中巧用Where来查找相关元素
  16. java.io.File中字段的使用
  17. arm中断体系结构
  18. final视频
  19. python之列表、元组、字典学习
  20. animation过渡效果

热门文章

  1. Task :rn-splash-screen:verifyReleaseResources FAILED
  2. 消息中间件 | 消息协议 | MQTT3.1.1 -- 《分布式 消息中间件实践》笔记
  3. ios 容错处理AvoidCrash
  4. 旅行青蛙分析(Android篇)
  5. Codeforces Round #565 (Div. 3) A. Divide it!
  6. git——解决“fatal: Authentication failed for &#39;https://github.com/balabala”
  7. Harry And Biological Teacher 分块 + 字符串hash
  8. Solve Equations HackerRank 扩展欧几里德 &amp;&amp; 数学
  9. Eventlet Greenlet
  10. ZK请求处理