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

原创 黄良钵  2017-11-27 20:31  阅读 325 次 评论 2 条

不多说了,看代码

  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>

 

关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

  1. 淘宝天猫优惠券大全
    淘宝天猫优惠券大全 【VIP 3】 @回复

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