revivre 2015-01-24
网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许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.3.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>