suchen

Heim >Web-Frontend >js-Tutorial >JSONP-Methode zur domänenübergreifenden Anforderung von Daten zur Implementierung der Abfrage von Mobiltelefonnummern

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

不言
不言Original
2018-07-02 14:06:051597Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in die Implementierung von Ajax durch jQuery zum Aufrufen von WCF-DienstenNächster Artikel：Einführung in die Implementierung von Ajax durch jQuery zum Aufrufen von WCF-Diensten

In Verbindung stehende Artikel

Mehr sehen