学习大纲
获取豆瓣数据资料效果如下图
点击下图按钮获取javascript书名和作者
代码如下
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>jsonp豆瓣</title> <style> table, tr, td,th{ border: 1px solid #000; border-collapse: collapse; } </style> </head> <body> <div id="mydiv"> <button id="btn">点击</button> </div> <table> <thead><tr><th>书名</th><th>作者</th></tr></thead> <tbody></tbody> </table> </body> <script type="text/javascript"> function handleResponse(response){ console.log(response); var books = response.books; var str = ''; books.forEach(function (ele, index) { str += '<tr><td>' + ele.title + '</td><td>' + ele.author[0] + '</td></tr>'; }) var tb = document.getElementsByTagName('tbody')[0]; tb.innerHTML = str; } </script> <script type="text/javascript"> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var script = document.createElement("script"); script.src = "https://api.douban.com/v2/book/search?q=javascript&callback=handleResponse"; document.body.insertBefore(script, document.body.firstChild); }; }; </script> </html>
博主联系方式:
- 微信:34419369
- QQ: 34419369
- 公众号:前方录
- 有什么不懂的地方欢迎联系我,帮到你是我会很开心