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 相关文章推荐
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
JavaScript数组常用方法
Mar 02 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 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 Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python运算符重载用法实例
2015/05/28 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
Django中的Signal代码详解
2018/02/05 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python中嵌套函数的实操步骤
2019/02/27 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
会计专业的自荐信
2013/12/12 职场文书
关于迟到的检讨书
2014/01/26 职场文书
超市周年庆活动方案
2014/08/16 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
考察邀请函范文
2015/01/31 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书