需求分析
获取豆瓣电影的api接口的数据
接口URL地址: http://api.douban.com/v2/movie/top250?start=6&count=10
解决方案
选择常见方案JSONP
实现方式一:使用jQuery中的$.getJSON方法获取数据
实现方式二:使用jQuery中的$.Ajax方法获取数据
实现方式三:使用原生JS实现JSONP
方法一:$.getJSON
$.getJSON("https://api.douban.com/v2/movie/top250?callback=?", {
// 上面的callback是指的回调函数名的参数名(一般默认为:callback),供后台获取参数判断时候使用
// callback后面的问号,是让系统随机帮你生成jsonp回调函数名,当然你也可以自定义去设置函数名,详情见方法三。
"start": 6,// 传到后台的参数
"count": 10// 传到后台的参数
}, function (json) {
console.log(json);//输出JSON格式数据
},"json");
方法二:$.Ajax
$.ajax({
type: 'get',
async: true,//默认是异步
url: 'https://api.douban.com/v2/movie/top250?start=6&count=10',
dataType: 'jsonp',
jsonp: 'callback',//回调函数名的参数名(一般默认为:callback),供后台获取参数判断时候用
jsonpCallback: "getMovieListFn",// 这次自定义了回调函数的函数名,底层掉的时候是掉这个函数的。
success: function (data) {
console.log(data)
},
error: function (data) {
alert("error");
}
});
方法三:原生JS实现JSONP
// 自定义一个名为handleResponse的函数,并定义形参response,请求成功后执行这个函数
function handleResponse(response){
console.log(response);// 输出数据
}
var hm = document.createElement("script");
// 给这个动态创建的script的标签,添加src地址
// 并指定callback调用的函数为handleResponse,这样数据请求成功后就会自
// 动去调用上面的handleResponse函数
hm.src = "http://api.douban.com/v2/movie/top250?start=6&count=10&callback=handleResponse";
// 获取页面中第一个script标签。
var s = document.getElementsByTagName("script")[0];
// 把动态创建的这个script标签放在document中所有script标签的最前面。
s.parentNode.insertBefore(hm, s);