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邮箱登陆入口在哪里

7629

CakePHP 教程

1389

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

141

显示更多

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技术开发过程中，可能遇到的跨域问题以及解决方法。我们将从导致跨域的原因开始，然后介绍几种常见的解决方案，并提供具体代码示例。一、跨域问题的原因在Web开发中，由于浏览器的安全策略，浏览器会限制从一个源（域、协议或端口）请求另一个源的资源。这就是所谓的“同源策略”。当我们在Vue技术开发中，前端与

在Beego框架中使用CORS解决跨域问题 Jun 04, 2023 pm 07:40 PM

随着Web应用程序的发展和互联网的全球化，越来越多的应用程序需要进行跨域请求。对于前端开发人员而言，跨域请求是一个常见的问题，它可能导致应用程序无法正常工作。在这种情况下，解决跨域请求问题的最佳方法之一是使用CORS。在本文中，我们将重点介绍如何在Beego框架中使用CORS解决跨域问题。什么是跨域请求？在Web应用程序中，跨域请求是指从一个域名的网页向另一

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版

热门话题