我们经常在搜索框输入文字时,不需要点击搜索,下面就可以实时显示搜索到的相关信息。之前觉得这个功能提高了很大效率很炫酷,接触了前端发现原来实现也很简单。
jsonp 的东西我自己是讲不清的毕竟是个了解。通常用 Ajax 在不刷新页面的情况下刷新局部页面,但是 Ajax 只能请求跟网页同一个服务器里的资源,所以要用到可以跨域请求的 jsonp,简而言之就是可以在某一网页中随意请求其他服务器里的资源,来局部更新当前页面。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
- <script>
- $(function() {
- // keyup 监听输入框
- $('.input').keyup(function() {
- var input = $(this).val();
- $.ajax({
- url: 'https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8',
- type: 'GET', // 请求类型
- dataType: 'jsonp',
- data: { word: input}
- })
- .done(function(data) {
- response = data.s; // 获取返回结果
- $('.con').empty(); // 清空输入框
- // 把所有结果添加到列表
- for (var i = 0; i < response.length; i++) {
- var $li = $('<li>' + response[i] + '</li>');
- $('.con').append($li);
- }
- })
- .fail(function() {
- alert('error');
- });
- });
- });
- </script>
- </head>
- <body>
- <input type="text" class="input">
- <ul class="con"></ul>
- </body>
- </html>
,word=1 就是传递过去的数据,另外要加上
- https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=1
,不然 jsonp 输入中文时返回结果会是乱码
- encodein=utf-8&encodeout=utf-8
- jQuery172023165242407540276_1514127784930({q:"1",p:true,s:["163",
- "1688阿里巴巴批发网","1688",
- "163邮箱登录","1688阿里巴巴","12306网上订票官网",
- "12306","126","126邮箱登录","139邮箱登录"]});
总的来说还是灰常简单滴~
Nicelle Beauchene
New York, United States
来源: http://www.jianshu.com/p/39e3a3261028