JSONP-Methode zur domänenübergreifenden Anforderung von Daten zur Implementierung der Abfrage von Mobiltelefonnummern-js-Tutorial-php.cn

JSONP-Methode zur domänenübergreifenden Anforderung von Daten zur Implementierung der Abfrage von Mobiltelefonnummern

不言

Freigeben： 2018-07-02 14:06:05

Original

1593 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode der domänenübergreifenden JSONP-Anforderungsdaten zur Implementierung der Mobiltelefonnummernabfrage vorgestellt. Er analysiert das Prinzip der domänenübergreifenden JSONP-Anforderungsdaten und die Anwendungsfähigkeiten der Nummernabfrage im Detail hat einen bestimmten Referenzwert und wird benötigt.

Dieser Artikel beschreibt das Beispiel für domänenübergreifende JSONP-Anforderungsdaten zur Implementierung der Mobiltelefonnummernabfrage. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Vorwort

Es gibt viele offene APIs im Internet, wenn wir Daten lokal über Ajax abrufen. Wir werden immer auf eines stoßen. Das Problem ist domänenübergreifend! Wenn Sie kein PHP usw. verwenden, wie können Sie das domänenübergreifende Problem nur durch JS lösen? Vielleicht ist JSONP eine gute Wahl.

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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist die chinesische PHP-Website!

Verwandte Empfehlungen:

Einführung in die Methode zur Verwendung von jQuery zur Implementierung von Ajax zum Aufrufen von WCF-Diensten

Implementierung von jQuery mehrstufiges Akkordeonmenü

Das obige ist der detaillierte Inhalt vonJSONP-Methode zur domänenübergreifenden Anforderung von Daten zur Implementierung der Abfrage von Mobiltelefonnummern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!