jsonp cross-domain request data method to implement mobile phone number query-JS Tutorial-php.cn

jsonp cross-domain request data method to implement mobile phone number query

不言

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

Original

1507 people have browsed it

This article mainly introduces the method of jsonp cross-domain request data to implement mobile phone number query. It analyzes the principle of jsonp cross-domain request data and the application skills of querying numbers in detail in the form of examples. It has certain reference value and needs Friends can refer to the following

The example of this article describes the method of jsonp cross-domain request data to implement mobile phone number query. Share it with everyone for your reference, the details are as follows:

Preface

There are many open APIs on the Internet. When we obtain data locally through ajax, we will always encounter one The problem is cross-domain! If you don't use PHP, etc., how can you solve the cross-domain problem just through JS? Maybe jsonp is a good choice.

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>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the method of using jQuery to implement ajax to call WCF services

Implementation of jQuery multi-level accordion menu

The above is the detailed content of jsonp cross-domain request data method to implement mobile phone number query. For more information, please follow other related articles on the PHP Chinese website!