jsonp跨域请求数据实现手机号码查询实例分析,使
分类:关于计算机

本文实例呈报了jsonp跨域央求数据完结手提式有线电话机号码查询的点子。分享给大家供我们参谋,具体如下:

js部分

前言

(function(window, document) {
  'use strict';
  var jsonp = function(url, data, callback) {
    //1、挂载回调函数
    var fnsuffix = Math.random().toString().replace('.', '');
    var cbFuncName = 'my_json_cb' + fnsuffix;
    window[cbFuncName] = callback;
    //2、将data转换成url字符串的形式
    //{id=1,count=4}==>id=1&count=4
    var querystring = url.indexOf('?') == -1 ? '?' : '&';   //判断url中最后是否有?,没有则为?
    for (var key in data) {
      querystring += key + '=' + data[key] + '&';
    }
    //3、处理url中回调函数 url+=callback=sdgade
    querystring += 'callback=' + cbFuncName;
    //querystring=?id=1&count=4&callback=sdgade
    //4、创建一个script标签
    var scriptElement = document.createElement('script');
    scriptElement.src = url + querystring;
    //5、把script标签放到页面上
    document.body.appendChild(scriptElement);
  };
  window.$jsonp = jsonp;
})(window, document)

互连网有成都百货上千吐放的api,我们在本土通过ajax获取数据时,总会高出二个主题素材,这正是跨域!假若不注重php等,仅仅通过js怎么解决跨域的难题啊?大概jsonp是个不利的取舍。

在页面中测验

知识策动

<!DOCTYPE html>
<html>
<head>
  <title>jsonp</title>
</head>
<body>
  <div id="htt"></div>
  <script type="text/javascript" src="http.js"></script>
  <script>
    (function(){
      $jsonp('http://api.douban.com/v2/movie/in_theaters',{},  
        function(data){
          document.getElementById('htt').innerHTML=JSON.stringify(data);
        });
    })()
  </script>
</body>
</html>

事先一篇《说说JSON和JSONP 可能你会茅塞顿开》对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" >
    查询
    号码有误 或 无数据
    <ul>
      <li class="num">手机号码: </li>      
      <li class="province">归属省份: </li>
      <li class="operators">运 营 商: </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>

你只怕感兴趣的篇章:

  • jQuery使用JSONP完结跨域获取数据的三种格局详解
  • 经过jsonp获取json数据完毕AJAX跨域央求
  • JavaScript用JSONP跨域乞请数据实例详解
  • 基于Jquery的跨域传输数据(JSONP)
  • AJAX跨域诉求之JSONP获取JSON数据
  • AngularJS达成的JSONP跨域访谈数据传输作用详解
  • Ajax的jsonp情势跨域获取数据的简易实例
  • jsonp跨域乞求数据达成手提式有线电话机号码查询实例剖判
  • AJAX跨域诉求JSONP获取JSON数据的实例代码
  • jsonp跨域获取数据的基础教程

瞩望本文所述对我们jQuery程序设计有着援助。

你或然感兴趣的稿子:

  • jQuery使用JSONP完成跨域获取数据的二种办法详解
  • 由此jsonp获取json数据完结AJAX跨域央求
  • JavaScript用JSONP跨域央浼数据实例详解
  • 依据Jquery的跨域传输数据(JSONP)
  • AJAX跨域央求之JSONP获取JSON数据
  • 应用jsonp达成跨域获取数据实例解说
  • AngularJS完结的JSONP跨域访谈数据传输作用详解
  • Ajax的jsonp方式跨域获取数据的总结实例
  • AJAX跨域哀告JSONP获取JSON数据的实例代码
  • jsonp跨域获取数据的基础教程

本文由正版必中一肖图发布于关于计算机,转载请注明出处:jsonp跨域请求数据实现手机号码查询实例分析,使

上一篇:提交表单,jQuery同步提交示例代码 下一篇:没有了
猜你喜欢
热门排行
精彩图文