휴대폰 번호 쿼리를 구현하는 jsonp 도메인 간 요청 데이터 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

휴대폰 번호 쿼리를 구현하는 jsonp 도메인 간 요청 데이터 방법

Jul 02, 2018 pm 02:06 PM

jsonp 데이터 요청 교차 도메인

이 글에서는 휴대폰 번호 쿼리를 구현하기 위한 jsonp 도메인 간 요청 데이터 방법을 주로 소개하며, jsonp 도메인 간 요청 데이터의 원리와 숫자 쿼리의 응용 기술을 예제 형식으로 자세히 분석합니다. 참조값. 도움이 필요한 친구는 다음을 참고하시면 됩니다

본 글의 예시에서는 jsonp 크로스 도메인 요청 데이터를 활용하여 휴대폰 번호 쿼리를 구현하는 방법을 설명하고 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

머리말

인터넷에는 ajax를 통해 로컬로 데이터를 얻을 때 항상 문제, 즉 도메인 간 문제가 발생합니다. ! PHP 등을 사용하지 않는다면 어떻게 JS만으로 크로스 도메인 문제를 해결할 수 있을까요? 어쩌면 jsonp가 좋은 선택일 수도 있습니다.

코드:

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;meta name=&quot;author&quot; content=&quot;@my_coder&quot;&gt;
 &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0&quot;&gt;
&lt;title&gt; 手机号查询 &lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
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=&quot;text&quot;]{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;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;手机号码归属地查询&lt;/h1&gt;
  &lt;p class=&quot;outer&quot;&gt;
    &lt;p&gt;请输入手机号码&lt;/p&gt;
    &lt;input type=&quot;text&quot; &gt;
    &lt;span class=&quot;button&quot;&gt;查询&lt;/span&gt;
    &lt;span class=&quot;error&quot;&gt;号码有误 或 无数据&lt;/span&gt;
    &lt;ul&gt;
      &lt;li class=&quot;num&quot;&gt;手机号码: &lt;span&gt;&lt;/span&gt;&lt;/li&gt;      
      &lt;li class=&quot;province&quot;&gt;归属省份: &lt;span&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li class=&quot;operators&quot;&gt;运 营 商: &lt;span&gt;&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.8.0.min.js&quot; &gt;&lt;/script&gt;
&lt;script&gt;
  var tel;
  var ajax=function(){
    //淘宝接口  
    $.ajax({
       type: &quot;get&quot;,
       url: &#39;http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=&#39;+tel,
       dataType: &quot;jsonp&quot;,
       jsonp: &quot;callback&quot;,
       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;);  
        }
      }
    }
  });
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!