jsonp跨域請求資料實現手機號碼查詢實例分析

首頁

web前端

js教程

jsonp跨域請求資料實現手機號碼查詢實例分析_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:26 PM

jsonp 請求數據跨域

本文實例講述了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程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7711

Java教學

1640

CakePHP 教程

1394

Laravel 教程

1288

PHP教程

1232

Related knowledge

PHP Session 跨域問題的解決方法 Oct 12, 2023 pm 03:00 PM

PHPSession跨域問題的解決方法在前後端分離的開發中，跨域請求已成為常態。在處理跨域問題時，我們通常會涉及session的使用和管理。然而，由於瀏覽器的同源策略限制，跨域情況下預設無法共享session。為了解決這個問題，我們需要採用一些技巧和方法來實現session的跨域共享。一、使用cookie跨域共享session最常

Vue 中如何進行跨域請求？ Jun 10, 2023 pm 10:30 PM

Vue是一種流行的JavaScript框架，用於建立現代化的Web應用程式。在使用Vue開發應用程式時，常常需要與不同的API交互，而這些API往往位於不同的伺服器上。由於跨域安全性策略的限制，當Vue應用程式在一個網域上運行時，它不能直接與另一個網域上的API進行通訊。本文將介紹幾種在Vue中進行跨域請求的方法。 1.使用代理常見的跨域解決方案是使用代理

如何使用Flask-CORS實現跨域資源共享 Aug 02, 2023 pm 02:03 PM

如何使用Flask-CORS實現跨域資源共享引言：在網路應用開發中，跨域資源共享（CrossOriginResourceSharing，簡稱CORS）是一種機制，允許伺服器與指定的來源或網域名稱之間共享資源。使用CORS，我們可以靈活地控制不同域之間的資料傳輸，實現安全、可靠的跨域存取。在本文中，我們將介紹如何使用Flask-CORS擴充庫來實現CORS功

Vue中如何利用JSONP實作跨域請求 Oct 15, 2023 pm 03:52 PM

Vue中如何利用JSONP實現跨域請求簡介由於同源策略的限制，前端在進行跨域請求時會受到一定的阻礙。 JSONP（JSONwithPadding）是一種跨域請求的方法，它利用<script>標籤的特性，透過動態建立<script>標籤來實現跨域請求，並將回應資料作為回呼函數的參數傳遞回來。本文將詳細介紹在Vue中如何利用JSONP實

如何在HTML中允許跨域使用影像和畫布？ Aug 30, 2023 pm 04:25 PM

為了允許跨網域使用影像和畫布，伺服器必須在其HTTP回應中包含適當的CORS（跨網域資源共用）頭。這些頭可以設定為允許特定的來源或方法，或允許任何來源存取資源。 HTMLCanvasAnHTML5CanvasisarectangularareaonawebpagethatiscontrolledbyJavaScriptcode.Anythingcanbedrawnonthecanvas,includingimages,shapes,text,andanimations.Thecanvasisagre

Vue技術開發中遇到的跨域問題及解決方法 Oct 08, 2023 pm 09:36 PM

Vue技術開發中遇到的跨域問題及解決方法摘要：本文將介紹在Vue技術開發過程中，可能遇到的跨域問題以及解決方法。我們將從導致跨域的原因開始，然後介紹幾種常見的解決方案，並提供具體程式碼範例。一、跨域問題的原因在網路開發中，由於瀏覽器的安全策略，瀏覽器會限制從一個來源（網域、協定或連接埠）請求另一個來源的資源。這就是所謂的「同源策略」。當我們在Vue技術開發中，前端與

在Beego框架中使用CORS解決跨域問題 Jun 04, 2023 pm 07:40 PM

隨著Web應用程式的發展和互聯網的全球化，越來越多的應用程式需要進行跨域請求。對於前端開發人員而言，跨域請求是一個常見的問題，它可能導致應用程式無法正常運作。在這種情況下，解決跨域請求問題的最佳方法之一是使用CORS。在本文中，我們將重點放在如何在Beego框架中使用CORS來解決跨域問題。什麼是跨域請求？在網路應用程式中，跨網域請求是指從一個網域的網頁向另一

PHP Session 跨域的跨平台相容性處理 Oct 12, 2023 am 09:46 AM

PHPSession跨域的跨平台相容性處理隨著Web應用程式的發展，越來越多的開發者面臨跨域的問題。跨域是指在一個網域下的網頁去請求另一個網域下的資源，這在一定程度上增加了開發難度，特別是對於涉及到會話（Session）管理的應用程式來說，更是一個棘手的問題。本文將介紹如何在PHP中處理跨域的會話管理，並提供一些具體的程式碼範例。會話管理是We

See all articles

jsonp跨域請求資料實現手機號碼查詢實例分析_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題