通过豆瓣Top250 API 使用jQuery ajax 做简单的数据对接
Posted 黄良钵博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过豆瓣Top250 API 使用jQuery ajax 做简单的数据对接相关的知识，希望对你有一定的参考价值。
不多说了，看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax对接</title>
</head>
<body>
<h1>标题</h1>
<ul class="ul"></ul>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$.ajax({
url:'http://api.douban.com/v2/movie/top250?start=0&count=25',
type:'GET', //GET
async:true, //或false,是否异步
data:{
// 需要发送到后端的数据
// start: 0,
// count: 25,
},
timeout:5000, //超时时间
dataType:'jsonp', //返回的数据格式：json/xml/html/script/jsonp/text
beforeSend:function(xhr){
console.log(xhr)
console.log('发送前')
},
success:function(data,textStatus,jqXHR){
// 请求成过回调函数
console.log(data)
$('h1').text(data.title)
for (var i = 0; i < data.subjects.length; i++) {
var title = data.subjects[i].title
var img = data.subjects[i].images.small
// console.log(title)
$('.ul').append(`<li>${title}<br /><img src="${img}"></li>`)
}
},
error:function(xhr,textStatus){
console.log('错误')
console.log(xhr)
console.log(textStatus)
},
complete:function(){
console.log('结束')
}
})
</script>
</body>
</html>
以上是关于通过豆瓣Top250 API 使用jQuery ajax 做简单的数据对接的主要内容，如果未能解决你的问题，请参考以下文章