1、ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</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: 'data.json',//请求的服务器路径，实际开发中写文档接口的路径
type: 'get',//分get/post请求
dataType: 'json',//要读取什么格式的数据，xml script html upload
// data:{page:1}//请求时要携带的参数
})
.done(function(data){//成功的时候会执行的函数
alert(data.name);
console.log(data);
})
.fail(function(){//失败的时候
console.log("error");
})
/*.always(function(){//不论成功与否都会执行
console.log("always");
})*/;
</script>
</head>
<body>
</body>
</html>
2、jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp</title>
<style type="text/css">
</style>
<!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> -->
<script type="text/javascript">
// alert($);//function(a,b){return new n.fn.init(a,b)}
/*
jsonp可以跨域请求数据的原理：
主要是利用了script标签可以跨域链接资源的特性
*/
function aa(dat){
alert(dat.name);
}
</script>
<script type="text/javascript" src="js/data.js"></script>
</head>
<body>
</body>
</html>
3、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>
4、jsonp公开接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp公开接口</title>
<style type="text/css">
</style>
<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?',//请求360搜索的公开接口
type: 'get',
dataType: 'jsonp',//跨域请求
data: {word: val}//携带参数
})
.done(function(data) {
console.log(data);
// alert(data.s.length);//10条数据
$('.list').empty();//先清空列表
//模拟搜索联想，循环插入新列表
for(var i=0; i<data.s.length; i++){
var $li = $('<li>'+data.s[i]+'</li>');
$li.prependTo('.list');
}
})
.fail(function() {
console.log("error");
});
})
})
</script>
</head>
<body>
<input type="text" id="txt01">
<ul class="list"></ul>
</body>
</html>
网友评论