在客户端读取后台的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打开本地文件,这很容易理解嘛,处于安全考虑啦。因为没开服务器,只是简单的打开网页,因此会出错。