ajax通过自己的服务器跨域得到API接口中的json数据，手机号码查吉凶
第一步：（准备工作）获取API接口，API文档
访问www.mob.com 进入mobAPI --找到手机号码查询吉凶
获得到了API信息。其中key的值需要用户申请，点击右上角申请之后会获得一个申请码即可使用该接口。例如博主申请的是2aa181c026ff4
访问的请求示例：http://apicloud.mob.com/appstore/lucky/mobile/query?key=2aa181c026ff4&mobile=13816863588
注意访问得到的仅仅是一个json数据，并没有回调函数，所以无法跨域得到数据，该接口与我们的地址非同源，也无法使用正常的ajax，所以我们先访问自己的服务器，再由服务器去访问此接口，返回数据给我们前端界面
第二步：（开始编码）html请求页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手机号码查询吉凶</title>
<!--引入jq文件-->
<script src="jquery.js"></script>
<script>
$(function(){
//点击事件
$("#btn").click(function(){
//获取用户输入
var phoneValue=$("#phone").val();
console.log(phoneValue);
//ajax获取数据
$.ajax({
url:"./server/getphoneinfo.php",
data:{mobile:phoneValue},
dataType:"json",
success:function(data){
console.log(data);
if(data.retCode==200){
//获得接口数据
var info= data.result.conclusion;
document.querySelector("#result").innerHTML=info;
}else{
document.querySelector("#result").innerHTML="请输入正确的手机号码";
}
}
})
});
})
</script>
</head>
<body>
<h3>输入手机号码进行吉凶查询</h3>
<input id="phone" placeholder="请输入手机号码"/>
<button id="btn">查询</button>
<!--显示到此sapn中-->
<span id="result"></span>
</body>
</html>
第三步：PHP后台页面
<?php
//在php中,获取一个链接中的数据
//设置编码
header("Content-Type:text/plain;charset=utf-8");
//拿到前端的数据
$phoneValue=$_GET["mobile"];
//使用curl进行网络数据访问
$ch =curl_init();
//网络访问的url地址
$url="http://apicloud.mob.com/appstore/lucky/mobile/query?key=2aa181c026ff4&mobile=".$phoneValue;
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
//执行HTTP请求
curl_setopt($ch,CURLOPT_URL,$url);
//得到数据
$res=curl_exec($ch);
echo $res;
?>完成效果