jQuery ajax读取json文件的方法示例代码
笨牛网在进行站长工具开发的过程中遇到需要使用jQuery ajax读取json文件的问题，我们在对淘宝IP库返回的JSON数据进行处理的时候需要用到AJAX来加快加载速度。因此有了这个项目
我们通过JQuery来读取服务器上一个PHP文件返回的JSON信息，并循环处理显示出来
其中PHP文件是对访客IP进行识别，并调用淘宝IP库接口判断归属地，因为我们服务器在美国，服务器访问淘宝IP库速度有点慢，因此如果直接用PHP代码输出，可能页面打开会比较慢，因此需要用到AJAX请求并输出的方法
PHP文件如下：
<?php
$ipzhenshi = get_real_ip();
?>
<?php
function get_real_ip(){
if(getenv('HTTP_CLIENT_IP') && strcasecmp(getenv('HTTP_CLIENT_IP'), 'unknown'))
{$ip = getenv('HTTP_CLIENT_IP');}
elseif(getenv('HTTP_X_FORWARDED_FOR') && strcasecmp(getenv('HTTP_X_FORWARDED_FOR'), 'unknown'))
{$ip = getenv('HTTP_X_FORWARDED_FOR');}
elseif(getenv('REMOTE_ADDR') && strcasecmp(getenv('REMOTE_ADDR'), 'unknown'))
{$ip = getenv('REMOTE_ADDR');}
elseif(isset($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], 'unknown'))
{$ip = $_SERVER['REMOTE_ADDR'];}
return preg_match("/[\d\.]{7,15}/", $ip, $matches) ? $matches[0] : false;
}
?>
<?php
$ip = $ipzhenshi; //获取IP
//通过淘宝IP接口查询IP归属地
$get_ipquery = "http://ip.taobao.com//service/getIpInfo.php?ip=$ip";
//CURL
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL,$get_ipquery);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_HEADER,0);
$content = curl_exec($ch);
curl_close($ch);
echo $content;
?>输出的JSON格式如下：
{"code":0,"data":{"country":"\u4e2d\u56fd","country_id":"CN","area":"\u534e\u4e1c","area_id":"300000","region":"\u798f\u5efa\u7701","region_id":"350000","city":"\u53a6\u95e8\u5e02","city_id":"350200","county":"","county_id":"-1","isp":"\u7535\u4fe1","isp_id":"100017","ip":"120.41.124.11"}}
只要将这个JSON取值出来就能实现需要的效果
因此用这个案例来讲解jQuery ajax读取json文件的方法
我们主要用到三种
1、ajax获取json数据并直接显示的实现代码
<script src = "https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<div id="ok"></div>
<script>
$(function () {
$.ajax({
type: "POST",
dataType: "json",
url: "./ip-query.php",
success: function (result) {
var str = "";
$.each(result,function(index,obj){
str = "国家：" + obj["country"] + "<br>";
str += "省份：" + obj["region"] + "<br>";
str += "城市：" + obj["city"] + "<br>";
});
$("#ok").append(str);
}
});
});
</script>
2、$.getJSON获取json数据并直接显示的实现代码
<script src = "https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<div id="ok"></div>
<script>
$(function(){
$.getJSON("./ip-query.php",function(data){
var $jsontip = $("#ok");
var strHtml = "";//存储数据的变量
$jsontip.empty();//清空内容
$.each(data,function(infoIndex,info){
strHtml += "IP：" + info["ip"];
strHtml = "国家：" + info["country"];
strHtml += "城市：" + info["city"];
strHtml += "省份：" + info["region"] + "<br>";
strHtml += "<hr>"
})
$jsontip.html(strHtml);//显示处理后的数据
})
})
</script>
3、点击按钮后才读入JSON数据
<script src = "https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type = "text/javascript" >
$(function (){
$("#btn").click(function () {
$.getJSON("./ip-query.php", function (data){
var $jsontip = $("#jsonTip");
var strHtml = "123";
//存储数据的变量
$jsontip.empty();
//清空内容
$.each(data, function (infoIndex, info){
strHtml = "国家：" + info["country"];
strHtml += "城市：" + info["city"];
strHtml += "省份：" + info["region"] + "<br>";
strHtml += "<hr>"
})
$jsontip.html(strHtml);
//显示处理后的数据
})
})
})
</script>
</head>
<body>
<div id="divframe">
<div class="loadTitle">
<input type="button" value="获取数据" id="btn"/>
</div>
<div id="jsonTip">
</div>
</div>顶(2)
踩(0)
- 最新评论