jsonp跨域请求数据实现手机号码查询实例分析


Posted in Javascript onDecember 12, 2015

本文实例讲述了jsonp跨域请求数据实现手机号码查询的方法。分享给大家供大家参考,具体如下:

前言

网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择。

知识准备

之前一篇《说说JSON和JSONP 也许你会豁然开朗》对jsonp已经介绍的很详细了,这里就不多介绍了,直接上实例吧

代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="@my_coder">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title> 手机号查询 </title>
<style type="text/css">
html{color:#000;background:#fff;}
body,ul,li,input,h1,button,p{padding:0;margin:0;}
li{list-style:none;}
html{background:#F6F8FC;overflow:hidden;}
.outer{margin:0 auto;width:280px;position:relative;}
h1{font-size:20px;text-align:center;border-bottom:1px dotted #A3C4DB;padding:10px 0;}
p{font-size:14px;padding:14px 0 10px;}
input[type="text"]{width:200px;height:30px;font-size:18px;}
.button{display:inline-block;width:60px;font-size:16px;text-align:center;line-height:34px;background:linear-gradient(#fff,#ccc);border:1px solid #004;border-radius:3px;cursor:pointer;}
ul{padding-top:26px;}
li {font-size:18px;line-height:30px;}
.error{position:absolute;left:4px;top:80px;color:red;font-size:14px;display:none;}
</style>
</head>
<body>
  <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="jquery-1.8.0.min.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>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
简述JS控制台的使用
Jul 15 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
jQuery Validate初步体验(二)
Dec 12 #Javascript
jQuery Validate初步体验(一)
Dec 12 #Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 #Javascript
jQuery同步提交示例代码
Dec 12 #Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 #Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 #Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 #Javascript
You might like
解析zend Framework如何自动加载类
2013/06/28 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
用python读写excel的方法
2014/11/18 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
买房委托公证书
2014/04/08 职场文书
超市商业计划书
2014/05/04 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书