开发者学堂课程【Ajax 前端开发入门与实战:手机号码查吉凶_获取第三方 json 格式数据】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/595/detail/8557
手机号码查吉凶_获取第三方 json 格式数据
获取服务器的场景
前端界面需要获取服务器相关数据
服务器相关数据有几种情况:
1、如果获取的是自己的服务器数据,通过 ajax1234 四个步骤来进行。
2、访问第三方接口,由于同源策略的限制是不能通过 ajax 进行访问的,如果第三方接口提供的是 jsonp 格式,就可以通过动态创建 scrip 标签的方式访问获取数据。
3、依然访问第三方接口,但第三方接口是 json 格式的字符串,并不是方法调用。
而动态创建 scrip 标签的本质是由于服务器返回一个方法调用,通过方法调用得到参数中具体的数据,这时候跨域是不好用的。
所以可以借助于自己服务器,自己服务器使用的是 php,jsp 后台开发语言,不受开发语言限制,前端界面通过 ajax 四个步骤访问到自己服务器接口某一个地址后,php 或者 jsp 通过相关代码访问第三方接口,将相关数据返回给前端界面。
例如:创建一个新的文件(getphoneinfo.php)来进行第三方接口的调用:
<
?php
//在 php 中,获取一个链接中的数据
//设置编码
header( "content-Type: text/plain; charset=utf-8");
//使用 curl 进行随络数据访问
$ch = curl_init();
//网络访问的 url 地址
$url = "http: //xxx";
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
//执行 HTTP 请求
curl_setopt($ch , CURLOPT_URL , $url);
//得到数据
$res = curl_exec($ch);
echo $res;
?>
主要通过
$ch = curl_init();
来创建对象,通过对象设置 url 访问 url 所对应的数据得到相关结果后 echo 到前端界面。
根据3 要进行相关的变化,这里 url是 apicloud.mob.com/appstore/lucky/mobile/query?
key=216e720443bb8&mobile=13816863588
这里“13816863588”需要进行动态变化,由前端界面传递过来,所以:
$phoneNumner = $_GET[ "mobile"];
将$phoneNumner 放在 mobile=字符串的后边,做一个字符串拼接。
php 中字符串拼接是通过.的方式进行连接的,php 中不管是变量的声明还是变量的使用都必须跟上 $ 符号。
在前端界面中访问的是自己服务器地址:url: "./server/getphoneinfo.ph
p
"
这时候也需要传递一个参数,通过 get 的方式获取到用户输入的手机号码所以在前端界面将手机号码传递过去,将 jsonp 改为 json :
$.ajax({
url: "./server/getphoneinfo.php",
data: {mobile:phoneNumber},
dataType: "json",
success: function(data){
console.log(data);
}
)
然后验证能不能通过这种方式获取到数据:
打开界面输入13911111111查询没有输出,出现报错:
Fatal error: Call to urdefined function curl_init
()
不能调用curl_init
()
方法。
这时候在 php 代码中打开 php 中的 php.ini 的配置文件,输入 curl_init 字符串查找出后将字符串前的:去掉,完成后将服务重启。
重新查询得到正确的数据:“遇吉则吉;遇区侧凶,惟靠谨慎,逢凶化吉 凶"需要将数据显示在标签当中,在前端界面中写入
var
info
=data.result.conclusion;
然后通过
document.querySelector( " #tresult")JinnerHTML = info;
放到 span 标签中,保存运行查询结果就显现出来了。
如果少输入手机号码位数就会出现手机号码错误,对于这种情况需要做条件判断,如果 retCode = 200 代表手机号码是获取成功的,所以:
if(data.retCode==200){
var info = data.result.conclusion;
documentL querySelector("tresult").innerHTML = info;
}
如果用户做了错误的操作:写入
else {
document.querySelector( " #tresult").innerHTML =“
出现信息获取失败,请检查输入“;