关闭边栏(ESC)打开边栏(ESC)
跨域取数据，感觉AJAX比较方便，原生的也挺简洁。下面的例子是演示百度联想词的一个功能。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>百度联想词接口</title> <style> * { padding: 0; margin: 0; } .wrapper { position: absolute; margin-left: -260px; left: 50%; top: 30%; } #btn { width: 560px; padding: 10px 10px; border: 1px solid rgb(45, 129, 240); } ul{ display: :none; } </style> </head> <body> <div class="wrapper"> <input type="text" id="btn"> <ul id="ul"></ul> </div> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script> $(function(){ $('#btn').keyup(function(){ $.ajax({ url:'http://suggestion.baidu.com/su', data:{wd:this.value}, dataType:'jsonp', jsonp:'cb', success:function(data){ if(data.s.length>0){ var html=""; data.s.forEach(function(ele, index) { html +='<li><a href =https://www.baidu.com/s?wd=' + ele + '>' + ele + '</li>' }) $('#ul').show().html(html); }else{ $('#ul').hide(); } }, error:function(){ $('#ul').hide(); } }) }) }) </script> <!--<script>--> <!-- window.onload=function(){--> <!-- var input=document.getElementById('btn')--> <!-- var oUl = document.getElementById('ul')--> <!-- input.onkeyup=function(){--> <!-- var value = this.value;--> <!-- var oScript = document.createElement('script'); --> <!-- oScript.src = 'https://suggestion.baidu.com/su?wd=' + value + '&cb=showData';--> <!-- document.getElementsByTagName('head')[0].appendChild(oScript);--> <!-- }--> <!-- window['showData']=function (data) {--> <!-- oUl.style.display = 'block';--> <!-- var list = data.s;--> <!-- var str = '';--> <!-- if (list.length > 0) {--> <!-- list.forEach(function(ele, index) {--> <!-- str += '<li><a href ="https://www.baidu.com/s?wd=' + ele + '">' + ele + '</li>';--> <!-- });--> <!-- oUl.innerHTML = str;--> <!-- } else {--> <!-- oUl.style.display = 'none';--> <!-- }--> <!-- }--> <!-- }--> <!--</script> --> </body> </html> |
AJAX确实方便许多啊
是啊 都考虑全用ajax