homework07.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. #container {
  8. width: 400px;
  9. margin: 0 auto;
  10. padding-top: 120px;
  11. text-align: center;
  12. }
  13. #container input {
  14. font-size: 22px;
  15. line-height: 30px;
  16. height: 30px;
  17. outline: none;
  18. }
  19. #keyword {
  20. width: 300px;
  21. border: none;
  22. text-align: center;
  23. border-bottom: 1px solid gray;
  24. }
  25. #search {
  26. width: 80px;
  27. color: white;
  28. border: none;
  29. background-color: red;
  30. }
  31. #result {
  32. width: 400px;
  33. margin: 10px auto;
  34. font-size: 18px;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div id="container">
  40. <input id="keyword" type="text" placeholder="请输入关键词">
  41. <input id="search" type="button" value="查询">
  42. </div>
  43. <hr>
  44. <p id="result"></p>
  45. <script src="js/jquery.min.js"></script>
  46. <script>
  47. $(function() {
  48. $("#search").on("click", function() {
  49. var keyword = $("#keyword").val().trim();
  50. if (keyword.length > 0) {
  51. var url = "http://api.tianapi.com/txapi/dream/";
  52. $.ajax({
  53. "url": url,
  54. "type": "get",
  55. "data": {
  56. "key": "772a81a51ae5c780251b1f98ea431b84",
  57. "word": keyword,
  58. },
  59. "dataType": "json",
  60. "success": function(jsonObj) {
  61. if (jsonObj.code == 250) {
  62. $("#result").text(jsonObj.msg);
  63. } else {
  64. $("#result").text(jsonObj.newslist[0].result);
  65. }
  66. }
  67. });
  68. }
  69. });
  70. });
  71. </script>
  72. </body>
  73. </html>