网上有很多开放的api，我们在本地通过ajax获取数据时，总会碰到一个问题，那就是跨域！如果不借助php，java等，仅仅通过js怎么解决跨域的问题呢？或许jsonp是个不错的选择。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
<title>手机号码归属地查询</title>
</head>
<style>
*{margin: 0;padding: 0;}
.box{width: 400px;height: 400px;margin: 0 auto;padding: 10px;background: #f3f3f3;}
.number-input{width: 200px;height: 30px;outline: none;border: 1px solid #ccc;padding-left: 6px;}
.button{height: 32px;width: 80px;border: none; line-height: 34px;cursor: pointer;margin-left: 30px;}
p{line-height: 36px;}
.error{color: red;}
</style>
<body>
<div class="box">
<input type="text" class="number-input" placeholder="请输入手机号"/><button class="button">查询</button>
<p class="error"></p>
<p>归属地：<span class="province"></span></p>
<p>运营商：<span class="catName"></span></p>
<p>所属公司：<span class="carrier"></span></p>
<p>手机号码：<span class="telString"></span></p>
</div>
</body>
<script type="text/javascript">
var tel;
var ajax = function() {
tel = $(‘.number-input‘).val();
//淘宝接口
$.ajax({
type: "get",
url: ‘//tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=‘ + tel,
dataType: "jsonp",
jsonp: "callback",
success: function(data) {
$(‘.error‘).html(‘‘);
$(‘.province‘).html(data.province);
$(‘.catName‘).html(data.province);
$(‘.carrier‘).html(data.province);
}
});
}
var reg = /^(13|15|18)[0-9]{9}$/;
//点击查询
$(‘.button‘).click(function() {
tel = $(‘.number-input‘).val();
if(tel) {
if(reg.test(tel)) {
ajax();
} else {
$(‘.error‘).html(‘‘);
$(‘.error‘).html(‘请输入正确的手机号码‘);
}
}
});
//键盘事件
$(‘.number-input‘).keydown(function(event) {
if(event.keyCode == 13) {
tel = $(‘.number-input‘).val();
if(tel) {
if(reg.test(tel)) {
ajax();
} else {
$(‘.error‘).html(‘‘);
$(‘.error‘).html(‘请输入正确的手机号码‘);
}
}
}
});
</script>
</html>
时间： 2024-11-04 20:01:37