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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
Postman动态获取返回值过程详解
Jun 30 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
PHP中GET变量的使用
2006/10/09 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
中止javascript执行的方法
2014/02/14 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
js实现分页功能
2017/05/24 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
Python开发的HTTP库requests详解
2017/08/29 Python
python常用数据重复项处理方法
2019/11/22 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
「月刊Action」2022年5月号封面公开
2022/03/21 日漫