网上有很多开放的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>
相关推荐
### JSONP 跨域请求数据实现手机号码查询实例分析 #### 前言 在现代Web开发中，跨域问题一直是前端开发者面临的一个常见难题。简单来说，由于浏览器的同源策略限制，当一个网页尝试从不同的源（即不同的协议、端口...
本文实例讲述了jsonp跨域请求数据实现手机号码查询的方法。分享给大家供大家参考，具体如下： 前言 网上有很多开放的api，我们在本地通过ajax获取数据时，总会碰到一个问题，那就是跨域！如果不借助php等，仅仅通过...
跨域请求的解决方法之一就是JSONP。JSONP的工作原理如下： 1. **创建回调函数**：在客户端，我们定义一个函数，例如`showIcibaDS`，这个函数将用于接收从远程服务器返回的数据。 2. **构造URL**：在请求的URL中，...
在Spring框架中处理JSONP跨域请求是一个常见问题，尤其当开发者需要从前端JavaScript代码中调用不同域上的RESTful服务时。由于浏览器的安全限制，同源策略防止了不同域的文档或脚本间的交互，这使得传统的AJAX请求不...
除了JSONP，还有多种跨域请求的方法，如： 1. **IFrame：** 通过嵌入一个IFrame来加载跨域内容，常用于实现页面间的通信。 2. **document.domain：** 同一顶级域名下的子域名可以通过设置`document.domain`来实现跨...
JSONP（JSON with Padding）是一种解决跨域请求的方法，即在客户端通过 script 标签请求服务器端的数据，然后服务器端将数据以 JSON 格式返回，并在返回数据中包含一个回调函数，以便客户端可以将数据处理。...
JSONP的核心在于script标签不受同源策略限制，可以跨域请求数据。 在给定文件中，我们看到了一段使用JSONP方法实现跨域获取数据的JavaScript代码实例及其在HTML页面中的应用。首先，我们定义了一个名为`jsonp`的...
【JSONP跨域原理】 JSONP（JSON with Padding）是一种跨域数据交互协议，它的基本思想是利用浏览器允许 `<script>` 标签加载不同源的脚本这一特性，通过动态创建 `<script>` 标签并设置其 `src` 属性来发起请求。...
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签可以跨域请求资源的特性，来实现JavaScript从一个域名获取数据并处理的能力。在本实例中，我们将深入探讨如何使用jQuery调用ASHX（ASP...
总结，Ajax跨域请求WebService.asmx是一个结合了前端JavaScript异步请求技术和后端C# Web服务交互的实例，它涉及到了跨域策略、HTTP通信、CORS配置以及JSON数据交换等多个Web开发的重要知识点。正确理解和运用这些...
同时，通过获取`jsonpCallback`参数并将其与JSON数据一起包装成一个函数调用的形式返回给客户端，从而实现JSONP的跨域请求。 ```java @RequestMapping("/selectApplyPeoples") public void insertScore...
总结来说，通过Vue2.0和vue-resource，我们可以轻松地实现JSONP跨域请求。Vue-resource提供了`$http.jsonp`方法，允许我们在组件中方便地发起JSONP请求。这在与不同源的API交互时非常有用，特别是对于那些只支持...
在网络游戏的开发中，网络客户端跨域请求数据是一项关键技术，它允许游戏客户端从不同源获取必要的资源和服务，例如游戏服务器的数据更新、用户信息同步、实时对战匹配等。本文件"网络游戏-网络客户端跨域请求数据的...
JSONP（JSON with Padding）是一种解决跨域请求的技术，它允许用户在不同域之间进行数据交互。JSONP的原理是利用`<script>`标签的src属性不受同源策略限制的特点，从而可以绕过安全限制。在这种技术中，服务器返回...
- **发送请求**：创建一个新的`<script>`元素，设置其`src`属性为需要跨域请求的URL，URL中包含一个参数，通常是`callback`，它的值就是客户端定义的回调函数名，例如`callback=jsonpCallback`。 - **服务端响应**...
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了HTML中`<script>`标签可以跨域请求资源的特点，来实现JavaScript从一个域获取另一个域的数据。JSONP主要用于解决同源策略带来的限制，因为在浏览器的...