• Ajax--跨域与JSONP--案例-淘宝搜索

    要实现的UI效果

     

     获取用户输入的搜索关键词

    为了获取到用户每次按下键盘输入的内容，需要监听输入框的 keyup 事件，示例代码如下：

    1. // 监听文本框的 keyup 事件
    2.  $('#ipt').on('keyup', function() {
    3.    // 获取用户输入的内容
    4.    var keywords = $(this).val().trim()
    5.    // 判断用户输入的内容是否为空
    6.    if (keywords.length <= 0) {
    7.      return
    8.    }
    9.    // TODO：获取搜索建议列表
    10.  })

     封装getSuggestList函数

    将获取搜索建议列表的代码，封装到 getSuggestList 函数中，示例代码如下：

    1.  function getSuggestList(kw) {
    2.    $.ajax({
    3.       // 指定请求的 URL 地址，其中，q 是用户输入的关键字
    4.       url: 'https://suggest.taobao.com/sug?q=' + kw,
    5.       // 指定要发起的是 JSONP 请求
    6.       dataType: 'jsonp',
    7.       // 成功的回调函数
    8.       success: function(res) { console.log(res) }
    9.    })
    10.  }

     渲染建议列表的UI结构

    1. 定义搜索建议列表

    1.  <div class="box">
    2.     
    3.     <div class="tabs">div>
    4.     
    5.     <div class="search-box">div>
    6.     
    7.     <div id="suggest-list">div>
    8.  div>

    2. 定义模板结构

    2.  <script type="text/html" id="tpl-suggestList">
    3.     {{each result}}
    4.        <div class="suggest-item">{{$value[0]}}div>
    5.     {{/each}}
    6.  script>

    3. 定义渲染模板结构的函数

    1. // 渲染建议列表
    2.  function renderSuggestList(res) {
    3.     // 如果没有需要渲染的数据，则直接 return
    4.     if (res.result.length <= 0) {
    5.        return $('#suggest-list').empty().hide()
    6.     }
    7.     // 渲染模板结构
    8.     var htmlStr = template('tpl-suggestList', res)
    9.     $('#suggest-list').html(htmlStr).show()
    10.  }

    4. 搜索关键词为空时隐藏搜索建议列表

    1.  $('#ipt').on('keyup', function() {
    2.     // 获取用户输入的内容
    3.     var keywords = $(this).val().trim()
    4.     // 判断用户输入的内容是否为空
    5.     if (keywords.length <= 0) {
    6.        // 如果关键词为空，则清空后隐藏搜索建议列表
    7.        return $('#suggest-list').empty().hide()
    8.     }
    9.     getSuggestList(keywords)
    10.  })

     美化

    1. #suggest-list{
    2.   border: 1px solid #ccc;
    3.   display: none;
    4. }
    5. .suggest-item{
    6.   line-height: 30px;
    7.   padding-left: 5px;
    8. }
    9. .suggest-item:hover{
    10.   cursor: pointer;
    11.   background-color: #ccc ;
    12. }

    输入框的防抖

    1. 什么是防抖

    防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

    就是英雄回城就是延迟几秒，而中间如果打断了， 那么就要重新计时

    就是在调用回调函数时，保证只执行一次，提高浏览器的性能

    2. 防抖的应用场景

    用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；

    不防抖，每输入一个字母就执行一次

     3. 实现输入框的防抖

    1. var timer = null                    // 1. 防抖动的 timer
    2.  
    3.  function debounceSearch(keywords) { // 2. 定义防抖的函数
    4.     timer = setTimeout(function() {
    5.     // 发起 JSONP 请求
    6.     getSuggestList(keywords)
    7.     }, 500)
    8.  }
    9.  
    10.  $('#ipt').on('keyup', function() {  // 3. 在触发 keyup 事件时，立即清空 timer
    11.     clearTimeout(timer)
    12.     // ...省略其他代码
    13.     debounceSearch(keywords)
    14.  })

    上次按键盘并没有到500ms 上次的直接清空了 然后下面重新开延迟器 到了500ms就是最后一次输入 能保证只输入一次

      缓存搜索的建议列表

    1. 定义全局缓存对象

    1. // 缓存对象
    2.   var cacheObj = {}

    2. 将搜索结果保存到缓存对象中

    1. // 渲染建议列表
    2.  function renderSuggestList(res) {
    3.     // ...省略其他代码
    4.     // 将搜索的结果，添加到缓存对象中
    5.     var k = $('#ipt').val().trim()
    6.     cacheObj[k] = res
    7.  }

    3. 优先从缓存中获取搜索建议

    1. // 监听文本框的 keyup 事件
    2.  $('#ipt').on('keyup', function() {
    3.     // ...省略其他代码
    4.  
    5.     // 优先从缓存中获取搜索建议
    6.     if (cacheObj[keywords]) {
    7.        return renderSuggestList(cacheObj[keywords])
    8.     }
    9.     // 获取搜索建议列表
    10.     debounceSearch(keywords)
    11.   })

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    7.     <title>Document</title>
    8.     <!-- 导入页面的基本样式 -->
    9.     <link rel="stylesheet" href="./css/search.css" />
    10.     <!-- 导入 jQuery -->
    11.     <script src="./lib/jquery.js"></script>
    12.     <script src="./lib/template-web.js"></script>
    13.   </head>
    14.   <body>
    15.     <div class="container">
    16.       <!-- Logo -->
    17.       <img src="./images/taobao_logo.png" alt="" class="logo" />
    18.  
    19.       <div class="box">
    20.         <!-- tab 栏 -->
    21.         <div class="tabs">
    22.           <div class="tab-active">宝贝</div>
    23.           <div>店铺</div>
    24.         </div>
    25.         <!-- 搜索区域（搜索框和搜索按钮） -->
    26.         <div class="search-box">
    27.           <input type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">
    28.             搜索
    29.           </button>
    30.         </div>
    31.         <!-- 搜索建议列表 -->
    32.         <div id="suggest-list">
    33.  
    34.         </div>
    35.       </div>
    36.     </div>
    37.     <!-- 模板结构 -->
    38.     <script type="text/html" id="tpl-suggestList">
    39.       {{each result}}
    40.       <!-- 搜索建议项 -->
    41.       <!-- 前面循环result，所以$value就是直接找result中的value值[0】为value中所需要的数据 -->
    42.       <div class="suggest-item">{{$value[0]}}</div>
    43.       {{/each}}
    44.     </script>
    45.     <script>
    46.       $(function(){
    47.         // 1.定义延迟器的id
    48.         var timer=null;
    49.         // 定义全局缓存对象
    50.         var cacheobj={}
    51.         // 2.定义防抖的函数
    52.         function debounceSearch(kw){
    53.           timer=setTimeout(function(){
    54.             getSuggesList(kw)
    55.           },500)
    56.         }
    57.         // 我输入框绑定keyup事件
    58.         $('.ipt').on('keyup',function(){
    59.           // 3.清空 timer 上次按键盘并没有到500ms 上次的直接清空了 然后下面重新开延迟器 到了500ms就是最后一次输入 能保证只输入一次
    60.           clearTimeout(timer)
    61.           var keywords=$(this).val().trim();
    62.           if(keywords.length<=0){
    63.             return $('#suggest-list').empty().hide()
    64.           }
    65.           // 先判断缓存中是否有数据
    66.           if(cacheobj[keywords]){
    67.             return renderSuggestList(cacheobj[keywords])
    68.           }
    69.           // 获取所有搜索列表
    70.           // console.log(keywords);
    71.           // getSuggesList(keywords)
    72.           debounceSearch(keywords)
    73.  
    74.         })
    75.         
    76.         function getSuggesList(kw){
    77.           $.ajax({
    78.             url:'https://suggest.taobao.com/sug?q='+kw,
    79.             dataType:'jsonp',
    80.             success:function(res){
    81.               console.log(res);
    82.               renderSuggestList(res)
    83.             }
    84.           })
    85.         }
    86.         // 渲染UI结构
    87.         function renderSuggestList(res){
    88.           if(res.result.length<=0){
    89.             return $('#suggest-item').empty().hide();
    90.           }
    91.           var htmlStr=template('tpl-suggestList',res);
    92.           $('#suggest-list').html(htmlStr).show();
    93.  
    94.           // 获取到用户输入的内容，当做键
    95.           var k=$('.ipt').val().trim()
    96.           console.log(k);
    97.           // 2.需要将数据作为值来缓存
    98.           cacheobj[k]=res
    99.         }
    100.       })
    101.     </script>
    102.   </body>
    103. </html>

  • 相关阅读:
    自考《软件工程》总结笔记
    Windows net start mysql 启动MySQL服务报错 发生系统错误 5 解决方法
    分布式session共享配置
    C++实现：求平方根，输入一个实数x 计算并输出平方根（要求保留2位小数）
    解析Spring中的循环依赖问题：初探三级缓存
    迷茫6连，这就是测试人毕业5年后的真实写照吗？
    [附源码]java毕业设计公务员报名
    微信小程序：两层循环的练习，两层循环显示循环图片大图（大图显示、多层循环）
    【16】基础知识：React路由 - React Router 6
    R语言 利用tmap绘制分级色彩地图
  • 原文地址：https://blog.csdn.net/weixin_64612659/article/details/127711773