méthode de demande de données inter-domaines jsonp pour implémenter une requête de numéro de téléphone mobile-js tutoriel-php.cn

méthode de demande de données inter-domaines jsonp pour implémenter une requête de numéro de téléphone mobile

不言

Libérer： 2018-07-02 14:06:05

original

1571 Les gens l'ont consulté

Cet article présente principalement la méthode de requête de données inter-domaines jsonp pour implémenter la requête de numéro de téléphone mobile. Il analyse en détail le principe des données de requête inter-domaine jsonp et les compétences d'application pour interroger des numéros sous forme d'exemples. a une certaine valeur de référence et est nécessaire. Les amis peuvent se référer à

Cet article décrit l'exemple de données de requête inter-domaines jsonp pour implémenter la requête de numéro de téléphone mobile. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Avant-propos

Il existe de nombreuses API ouvertes sur Internet Lorsque nous obtenons des données localement via ajax, nous en rencontrerons toujours un. Le problème est inter-domaines ! Si vous n'utilisez pas php, etc., comment pouvez-vous résoudre le problème inter-domaines uniquement via js ? Peut-être que jsonp est un bon choix.

Code :

<!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>
  <p 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>
  </p>
<script type="text/javascript" src="jquery-1.8.0.min.js" ></script>
<script>
  var tel;
  var ajax=function(){
    //淘宝接口  
    $.ajax({
       type: "get",
       url: &#39;http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=&#39;+tel,
       dataType: "jsonp",
       jsonp: "callback",
       success: function(data){
        console.log(data);
        $(&#39;.error&#39;).css(&#39;display&#39;,&#39;none&#39;);
        var province = data.province,
          operators = data.catName,
          num = data.telString;
        $(&#39;.num span&#39;).html(num);
        $(&#39;.province span&#39;).html(province);
        $(&#39;.operators span&#39;).html(operators);
       },
       error:function (){  
        $(&#39;li span&#39;).html(&#39;&#39;);
        $(&#39;.error&#39;).css(&#39;display&#39;,&#39;block&#39;);    
       }
     });
  }
  var reg = /^(13|15|18)[0-9]{9}$/;
  //点击查询
  $(&#39;.button&#39;).click(function(){
    tel=$(&#39;input[type=text]&#39;).val();
    if(tel){
      if(reg.test(tel)){
        ajax();
      }else{
        $(&#39;li span&#39;).html(&#39;&#39;);
        $(&#39;.error&#39;).css(&#39;display&#39;,&#39;block&#39;);  
      }
    }
  });
  //键盘事件
  $(window).keydown(function(event){
    tel=$(&#39;input[type=text]&#39;).val();
    if(event.keyCode==13) {
      if(tel){
        if(reg.test(tel)){
          ajax();
        }else{
          $(&#39;li span&#39;).html(&#39;&#39;);
          $(&#39;.error&#39;).css(&#39;display&#39;,&#39;block&#39;);  
        }
      }
    }
  });
</script>
</body>
</html>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez payer. attention au site PHP chinois !

Recommandations associées :

Introduction à la méthode d'utilisation de jQuery pour implémenter ajax pour appeler les services WCF

Implémentation de jQuery menu accordéon à plusieurs niveaux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!