jquery使用淘宝接口跨域查询手机号码归属地实例
<h1>手机号码归属地查询</h1>
<div class="outer">
<p>请输入手机号码</p>
<input type="text" >
<span class="button">查询</span>
<span class="error">号码有误 或 无数据</span>
<ul>
<li class="num">手机号码: <span></span></li>
<li class="province">归属省份: <span></span></li>
<li class="operators">运 营 商: <span></span></li>
</ul>
</div>
<script type="text/javascript" src="query.js" ></script>
<script>
var tel;
var ajax=function(){
//淘宝接口
$.ajax({
type: "get",
url: 'http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel='+tel,
dataType: "jsonp",
jsonp: "callback",
success: function(data){
console.log(data);
$('.error').css('display','none');
var province = data.province,
operators = data.catName,
num = data.telString;
$('.num span').html(num);
$('.province span').html(province);
$('.operators span').html(operators);
},
error:function (){
$('li span').html('');
$('.error').css('display','block');
}
});
}
var reg = /^(13|15|18)[0-9]{9}$/;//点击查询
$('.button').click(function(){
tel=$('input[type=text]').val();
if(tel){
if(reg.test(tel)){
ajax();
}else{
$('li span').html('');
$('.error').css('display','block');
}
}
});
//键盘事件
$(window).keydown(function(event){
tel=$('input[type=text]').val();
if(event.keyCode==13) {
if(tel){
if(reg.test(tel)){
ajax();
}else{
$('li span').html('');
$('.error').css('display','block');
}
}
}
});
</script>
相关文章
jQuery插件EasyUI校验规则 validatebox验证框
这篇文章主要介绍了jQuery插件EasyUI校验规则,主要介绍validatebox验证框,对validatebox进行校验规则扩展,使用jQuery EasyUI的朋友可以参考下。2015-11-11JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
下面小编就为大家带来一篇JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-05dul无法加载bootstrap实现unload table/user恢复
这篇文章主要介绍了dul无法加载bootstrap实现unload table/user恢复的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-09-09
最新评论