通过豆瓣Top250 API 使用jQuery ajax 做简单的数据对接

不多说了,看代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ajax对接</title>
  6. </head>
  7. <body>
  8.     <h1>标题</h1>
  9.     <ul class="ul"></ul>
  10. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  11.     <script>
  12.         $.ajax({
  13.             url:'http://api.douban.com/v2/movie/top250?start=0&count=25',
  14.             type:'GET', //GET
  15.             async:true,    //或false,是否异步
  16.             data:{
  17.                 // 需要发送到后端的数据
  18.                 // start: 0,
  19.                 // count: 25,
  20.             },
  21.             timeout:5000,    //超时时间
  22.             dataType:'jsonp',    //返回的数据格式:json/xml/html/script/jsonp/text
  23.             beforeSend:function(xhr){
  24.                 console.log(xhr)
  25.                 console.log('发送前')
  26.             },
  27.             success:function(data,textStatus,jqXHR){
  28.                  // 请求成过回调函数
  29.                 console.log(data)
  30.                 $('h1').text(data.title)
  31.                 for (var i = 0; i < data.subjects.length; i++) {
  32.                     var title = data.subjects[i].title
  33.                     var img = data.subjects[i].images.small
  34.                     // console.log(title)
  35.                     $('.ul').append(`<li>${title}<br /><img src="${img}"></li>`)
  36.                 }
  37.             },
  38.             error:function(xhr,textStatus){
  39.                 console.log('错误')
  40.                 console.log(xhr)
  41.                 console.log(textStatus)
  42.             },
  43.             complete:function(){
  44.                 console.log('结束')
  45.             }
  46.         })
  47.     </script>
  48. </body>
  49. </html>

 

黄良钵

博客站长,前端开发工程师

2 条评论

  1. 豆瓣也有开放API权限调用的话,第一次听说

    • 黄良钵

      豆瓣top250的api可以获取数据,但只是获取数据而已

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

通过豆瓣Top250 API 使用jQuery ajax 做简单的数据对接
返回顶部
网站稳定运行 : {{ diffYears }}年 零 {{ diffDays }}天 {{ diffHours }} 小时 {{ diffMinutes }} 分钟 {{ diffSeconds }} 秒

显示

忘记密码?

显示

显示

获取验证码

Close