jQuery-jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-jsonp</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$.ajax({
url: 'http://localhost:8080/1803/js/data.js',//跨域請求的地址，也可用相對路徑js/data.js
type: 'get',
dataType: 'jsonp',//使用jsonp跨域請求
jsonpCallback:'aa'
})
.done(function(data) {
alert(data.name);
})
.fail(function() {
console.log("error");
});
</script>
</head>
<body>
</body>
</html>
jsonp公開接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp公開接口</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//360搜索的公開接口
//https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=s
$(function(){
$('#txt01').keyup(function() {
var val = $(this).val();
$.ajax({
url: 'https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&fields=word',//請求360搜索的公開接口
type: 'get',
dataType: 'jsonp',//跨域請求
data: {word: val},//攜帶參數
jsonpCallback:'suggest_so'//指定360提供的jsonp的回調函數
})
.done(function(data) {
console.log(data);
// alert(data.result.length);//10條數據
$('.list').empty();//先清空列表
//模擬搜索聯想，循環插入新列表
for(var i=0; i<data.result.length; i++){
var $li = $('<li>'+data.result[i].word+'</li>');
$li.appendTo('.list');
}
})
/*.fail(function(XMLHttpRequest, textStatus, errorThrown) {//失敗
console.log("error");
// 狀態碼
console.log(XMLHttpRequest.status);
// 狀態
console.log(XMLHttpRequest.readyState);
// 錯誤信息
console.log(textStatus);
});*/
.fail(function(jqXHR, textStatus, errorThrown) {//失敗
console.log("error");
/*彈出jqXHR對象的信息*/
console.log(jqXHR.responseText);
console.log(jqXHR.status);
console.log(jqXHR.readyState);
console.log(jqXHR.statusText);
/*彈出其他兩個參數的信息*/
console.log(textStatus);
console.log(errorThrown);
});
});
})
</script>
</head>
<body>
<input type="text" id="txt01">
<ul class="list"></ul>
</body>
</html>
