开发者学堂课程【Ajax 前端开发入门与实战：手机号码查吉凶_无法通过跨域和 ajax 获取数据】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8556
手机号码查吉凶_无法通过跨域和 ajax 获取数据
目录：
一、编写 HTML 请求页面代码
二、编写 PHP 后台页面代码
一、第一步：（开始编码）html 请求页面
跨域的本质就是靠方法调用
跨域的限制：必须使用方法调用
打开 sublime
<!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;
?>
