跨域代码 手机号码

<!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?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>
时间： 2024-08-08 14:24:12

跨域代码 手机号码的相关文章

跨域用ajax处理并返回处理状态

<script type="text/javascript">        $(function () {            $("#submitBtu").bind("click", function () { submitData(); })        })        function submitData() {              var stuName = $("#stuName").

JavaScript和ajax 跨域的案例

今天突然想看下JavaScript和ajax 跨域问题,然后百度看了一下,写一个demo出来 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <tit

利用跨域请求来隐藏firbug控制台中的Ajax请求

普通jquery的Ajax请求在控制台中是可见的,如下: 而在利用jsonp(json with padding)进行Ajax跨域时,发现Ajax请求不会在控制台显示. 跨域代码如下: 前端代码: $.ajax({ type : "get", //jquey不支持post方式跨域 async:false, url : "http://www.cnblog.com", //跨域请求的URL dataType : "jsonp", //传递给后端,用

上传图片截图预览控件不显示cropper.js 跨域问题

上传图片到图片服务器,因为域名不同,多以会有跨域问题. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://img.xxx.com' is therefore not allowed access. 照看代码发现,cropper.js里面对图片的引用路径做了判断,给img标签添加了 crossorigin="anonymous"(匿名跨域属性). 并且用

Swagger跨域访问

我们用springboot开发完后,需要前端vue用swagger跨域,默认是不能跨域的,所以需要我们后台设置跨域访问,将下面代码完整复制即可. 在springboot项目中新建class : CorsConfig.java 完整跨域代码如下: @Configuration public class CorsConfig extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry reg

跨域问题实战 2

跨域问题实战 2 背景 由于整个项目提供出去的API都不是跨域的只是个别是需要跨域的,所以再上一次跨域问题实战中,自己是直接再controller层其中需要提供出去跨域的方法里设置了HttpServletResponse.setHeader("Access-Control-Allow-Origin","*").而且上次提供出去的只是一次简单的get请求,而不是复杂请求.但是呢,这次的需求是记录用户行为日志的一次跨域请求,也就是说是一次post请求.其中就涉及到htt

jsonp跨域请求数据实例之手机号码查询

网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php,java等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery.min.js"></script> <tit

ASP.NET中Cookie跨域的问题及解决代码

ASP.NET中Cookie跨域的问题及解决代码 http://www.liyumei.net.cn/post/share18.html Cookies揭秘  http://www.cnblogs.com/zhangziqiu/archive/2009/08/06/cookies-javascript-aspnet.html 最近在项目开发中遇到一个很棘手的问题,一个用户在顶级域名登录后,跳转到自己所拥有的二级域名下管理二级网站时,cookie丢失了,一直找解决办法找了整整两天,百度谷歌一大堆,

spring mvc 图片上传,图片压缩、跨域解决、 按天生成目录 ,删除，限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成目录 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE be