집 >웹 프론트엔드 >JS 튜토리얼 >jsonp 도메인 간 요청 data_jquery를 사용한 휴대폰 번호 쿼리 분석 예

jsonp 도메인 간 요청 data_jquery를 사용한 휴대폰 번호 쿼리 분석 예

WBOY원래의: 2016-05-16 15:26:041708검색

이 기사의 예에서는 jsonp 도메인 간 요청 데이터를 사용하여 휴대폰 번호 쿼리를 구현하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

머리말

인터넷에는 많은 개방형 API가 있습니다. Ajax를 통해 로컬로 데이터를 얻을 때 항상 문제에 직면하게 되는데, 이는 크로스 도메인입니다! php 등을 사용하지 않는데 어떻게 js로만 크로스 도메인 문제를 해결할 수 있을까요? 어쩌면 jsonp가 좋은 선택일 수도 있습니다.

지식 준비

이전 글 "JSON과 JSONP에 대해 이야기해보자. 갑자기 이해하게 될지도 모르겠다"에서는 이미 jsonp에 대해 자세히 소개했기 때문에 여기서는 직접 예제로 들어가도록 하겠다.

코드:

<!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>

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：자바스크립트 성능 최적화를 위한 이벤트 위임 예시에 대한 자세한 설명다음 기사：자바스크립트 성능 최적화를 위한 이벤트 위임 예시에 대한 자세한 설명

jsonp 도메인 간 요청 data_jquery를 사용한 휴대폰 번호 쿼리 분석 예

관련 기사