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