jsonp學習三jquery-jsonp
阿新 • • 發佈：2019-01-29
為了更加方便的訪問遠端伺服器上面的資料，jQuery進行了封裝。下面我們嘗試一下對淘寶網手機介面進行訪問。
效果展示：
首先我們直接在瀏覽器中輸入
https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13222222222
結果得到遠端伺服器返回的json資料格式如下
__GetZoneResult_ = {
mts:'1322222',
province:'江蘇',
catName:'中國聯通',
telString:'13222222222',
areaVid:'30511',
ispVid:'137815084',
carrier:'江蘇聯通'
}我們在本地伺服器上面進行訪問：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
function getData() {
var city = $("#phone").val();
$.ajax({
type: "get",
async: false,
url: "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel="+phone,
dataType: "jsonp",
jsonp: "callback",//傳遞給請求處理程式或頁面的，用以獲得jsonp回撥函式名的引數名(一般預設為:callback)
jsonpCallback:"flightHandler",//自定義的jsonp回撥函式名稱，預設為jQuery自動生成的隨機函式名，也可以寫"?"，jQuery會自動為你處理資料
success: function(json){
$('#result').html('');
$('#result').html(json.catName+"---"+json.province);
},
error: function(){
alert('fail');
}
});
}
</script>
</head>
<body>
<input type="text" id="phone" />
<button onclick="getData();">搜尋</button>
<span id="result"></span>
</body>
</html>