废话不多说直接上代码：
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8" /> 5. <title></title> 6. </head> 7. <style> 8. ul li{ 9. list-style: none; 10. } 11. </style> 12. <body> 13. <button>解梦</button> 14. <input type="text" /> 15. <ul> 16. 17. </ul> 18. </body> 19. <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> 20. <script> 21. $("button").on("click",function(){ 22. var dream=$("input").val() 23. //在这个我们定义一下需要请求的地址 24. var target="http://v.juhe.cn/dream/query?key=8194d647c67f88eedd63c&q="+dream 25. $.ajax({ 26. type:"get", 27. //这里请求的是雅虎的yql地址 28. url: 'http://query.yahooapis.com/v1/public/yql', 29. async:true, 30. dataType:"jsonp", 31. // 雅虎代理要求的数据格式 32. data: { 33. q: "select * from json where url=\'" + target+ "'", 34. //代理返回格式 35. format: "json" 36. }, 37. success:function(res){ 38. console.log(res) 39. var theword=res.query.results.json.result 40. console.log(theword) 41. for (var i=0 ; i<theword.length ; i++) { 42. if(theword[i].des==undefined){ 43. theword[i].des="预示为空" 44. }else{ 45. $("ul").append("<li>梦见："+theword[i].title+"</li><li>预示："+theword[i].des+"</li>") 46. 47. } 48. 49. 50. 51. } 52. } 53. 54. }); 55. }) 56. 57. 58. 59. </script> 60. </html>
