您的位置：首页 > Web前端 > JavaScript

使用Jsonp调用聚合数据API免费查询手机号码归属地

2017-09-18 21:37 836 查看

准备工作：使用聚合数据，调用免费API，需要先注册账号，免费申请获取手机号码归属地，这是网址https://www.juhe.cn/docs/api/id/11。

要理解跨域，首先要了解一下同源策略。

1.同源策略

所谓同源是指，域名，协议，端口相同，ajax请求的页面或资源只能是同一个域（域名，ip）下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：

XMLHttpRequest cannot load https://www.sina.com/. No
'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.

2.$.ajax使用方法

常用参数：

1、url 请求地址

2、type 请求方式，默认是'GET'，常用的还有'POST'

3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'

4、data 设置发送给服务器的数据

5、success 设置请求成功后的回调函数

6、error 设置请求失败后的回调函数

7、async 设置是否异步，默认值是'true'，表示异步

首先需要一个data.json文件，然后测试一下ajax的使用，注意引入jquery.js文件。

data.json

{
"code":1,
"data":{
"name":"xiaowang",
"age":88
}
}

$.ajax({
url: 'js/data.json',
type: 'GET',
dataType: 'json',
data:{'number':1}
success:function(data){
alert(data.name);
},
error:function(){
alert('服务器超时，请重试！');
}
});

新的写法(推荐)：

$.ajax({
url: 'js/data.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
})
.done(function(data) {
alert(data.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});

3.jsonp

ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了script标签可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数

1.这是jsonp请求本地数据的小例子，不过需要安装本地服务器环境，例如tomcat,apache,node.js等，然后写一个data.js文件

data.js

fnCallBackMethod(
{
"name":"请求成功!",
"age":10
}
)

$.ajax({
url:'js/data.js',
type:'get',
dataType:'jsonp',
jsonpCallback:'fnBack'
})
.done(function(data){
alert(data.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});

2.请求聚合数据的API，免费查询手机号码归属地。注意使用刚刚申请的key。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jsonp跨域访问</title>
<style>
div,
ul,
li,
input {
margin: 0px;
padding: 0px;
}

.logo_div {
width: 240px;
height: 64px;
margin: 200px;
}

.search_div {
height: 50px;
width: 620px;
border: 1px solid #19b955;
margin: 10px;
position: relative;
}

.search_div .text {
border: 0;
height: 50px;
width: 520px;
height: 50px;
font-size: 18px;
text-indent: 10px;
}

.search_div #search-button {
border: 0;
cursor: pointer;
font-family: "Microsoft YaHei";
font-size: 20px;
height: 51px;
outline: none;
right: 0px;
position: absolute;
top: 0;
width: 100px;
background-color: #19b955;
color: #fff;
}

.container {
width: 620px;
height: 230px;
margin: 10px;
border: 1px solid gray;
border-radius: 3px;
background: #ccc;
display: none;
}

#list {
width: 600px;
height: 210px;
margin: 0 auto;
list-style: none;
background: #333333;
color: white;
margin-top: 10px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

#list li {
margin-top: 4px;
font-size: 18px;
padding: 4px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
//处理选中蓝色边框问题
$(".text").focus(function () {
$(".text").css({
"outline": 0
})
})

　　　　　　$("input").keydown(function (e) {//当按下按键时
　　　　　　　　if (e.which == 13) {//.which属性判断按下的是哪个键，回车键的键位序号为13
　　　　　　　　$('#search-button').trigger("click");//触发搜索按钮的点击事件
　　　　　　　　}
　　　　　　});

$("#search-button").click(function () {
if ($(".text").val() == "") {
return;
} else {
$.ajax({
url: 'http://apis.juhe.cn/mobile/get',
type: "get",
dataType: "jsonp",
data: {
phone: $(".text").val(),
dtype: "json",
key: "你的key"
}
})
.done(function (data) {
$(".container").fadeIn();
var $list = $("#list");
var sStr = "";
sStr += "<li>手机号码:" + $(".text").val() + "</li>";
sStr += "<li>省份:" + data.result["province"] + "</li>";
sStr += "<li>城市:" + data.result["city"] + "</li>";
sStr += "<li>区号:" + data.result["areacode"] + "</li>";
sStr += "<li>邮编:" + data.result["zip"] + "</li>";
sStr += "<li>运营商:" + data.result["company"] + "</li>";

$list.html(sStr);
$(".text").val("")
})
.error(function () {
var $list = $("#list");
var sStr = "";

sStr += "<li>" + "没有数据" + "</li>";
})
}
})
})
</script>
</head>

<body>

<div class="search_div">
<input type="text" class="text" placeholder="请输入手机号码">
<input type="button" id="search-button" value="查询">
</div>
<div class="container">
<ul id="list"></ul>
</div>

</body>
</html>

测试：随便写一个手机号码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航