cari

Rumah >hujung hadapan web >tutorial js >Contoh analisis pertanyaan nombor telefon mudah alih menggunakan data_jquery permintaan merentas domain jsonp

Contoh analisis pertanyaan nombor telefon mudah alih menggunakan data_jquery permintaan merentas domain jsonp

WBOY
WBOYasal
2016-05-16 15:26:041708semak imbas

Contoh dalam artikel ini menerangkan kaedah menggunakan data permintaan merentas domain jsonp untuk melaksanakan pertanyaan nombor telefon mudah alih. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Kata Pengantar

Terdapat banyak API terbuka di Internet Apabila kami memperoleh data secara setempat melalui ajax, kami akan sentiasa menghadapi masalah, dan itu adalah merentas domain. Jika anda tidak menggunakan php, dsb., bagaimana anda boleh menyelesaikan masalah merentas domain hanya melalui js? Mungkin jsonp adalah pilihan yang baik.

Persediaan ilmu

Artikel sebelum ini "Mari kita bercakap tentang JSON dan JSONP, mungkin anda akan tiba-tiba faham " telah pun memperkenalkan jsonp secara terperinci, jadi saya tidak akan memperkenalkannya secara terperinci di sini

Kod: 

<!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&#63;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>

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang contoh delegasi acara untuk pengoptimuman prestasi javascriptArtikel seterusnya：Penjelasan terperinci tentang contoh delegasi acara untuk pengoptimuman prestasi javascript

Artikel berkaitan

Lihat lagi