• AJAX——案例

    1.商品分类

    需求：尽可能同时展示所有商品分类到页面上

    步骤：

    1. 获取所有的一级分类数据
    2. 遍历id，创建获取二级分类请求
    3. 合并所有二级分类Promise对象
    4. 等待同时成功后，渲染页面

    index.html代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>案例_分类导航</title>
    9.   <link rel="stylesheet" href="./css/index.css">
    10. </head>
    11.  
    12. <body>
    13.   <!-- 大容器 -->
    14.   <div class="container">
    15.     <div class="sub-list">
    16.       <div class="item">
    17.         <h3>分类名字</h3>
    18.         <ul>
    19.           <li>
    20.             <a href="javascript:;">
    21.               <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
    22.               <p>巧克力</p>
    23.             </a>
    24.           </li>
    25.           <li>
    26.             <a href="javascript:;">
    27.               <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
    28.               <p>巧克力</p>
    29.             </a>
    30.           </li>
    31.           <li>
    32.             <a href="javascript:;">
    33.               <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
    34.               <p>巧克力</p>
    35.             </a>
    36.           </li>
    37.         </ul>
    38.       </div>
    39.     </div>
    40.   </div>
    41.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    42.   <script>
    43.     /**
    44.      * 目标：把所有商品分类“同时”渲染到页面上
    45.      *  1. 获取所有一级分类数据
    46.      *  2. 遍历id，创建获取二级分类请求
    47.      *  3. 合并所有二级分类Promise对象
    48.      *  4. 等待同时成功后，渲染页面
    49.     */
    50.     // 1. 获取所有一级分类数据
    51.     axios({
    52.       url:'http://hmajax.itheima.net/api/category/top'
    53.     }).then(result => {
    54.       console.log(result)
    55.       // 2. 遍历id，创建获取二级分类请求
    56.       const secPromiseList = result.data.data.map(item => {
    57.         return axios({
    58.           url:'http://hmajax.itheima.net/api/category/sub',
    59.           params: {
    60.             id: item.id  // 一级分类id
    61.           }
    62.         })
    63.       })
    64.       console.log(secPromiseList) // [二级分类请求Promise对象，二级分类请求Promise对象……]
    65.       // 3. 合并所有二级分类Promise对象
    66.       const p = Promise.all(secPromiseList)
    67.       p.then(result => {
    68.         console.log(result)
    69.         // 4. 等待同时成功后，渲染页面
    70.         const htmlStr = result.map(item => {
    71.           const dataObj = item.data.data // 取出关键数据对象
    72.           return `<div class="item">
    73.         <h3>${dataObj.name}</h3>
    74.         <ul>
    75.           ${dataObj.children.map(item => {
    76.             return `<li>
    77.             <a href="javascript:;">
    78.               <img src="${item.picture}">
    79.               <p>${item.name}</p>
    80.             </a>
    81.           </li>`
    82.           }).join('')}
    83.         </ul>
    84.       </div>`
    85.         }).join('')
    86.  
    87.         console.log(htmlStr)
    88.         document.querySelector('.sub-list').innerHTML = htmlStr
    89.       })
    90.     })
    91.  
    92.   </script>
    93. </body>
    94.  
    95. </html>

    index.css代码

    1. * {
    2.   margin: 0;
    3.   padding: 0;
    4.   box-sizing: border-box;
    5. }
    6. a {
    7.   text-decoration: none;
    8.   color: #333;
    9. }
    10. ul {
    11.   list-style: none;
    12. }
    13. .container {
    14.   width: 980px;
    15.   margin: 0 auto;
    16. }
    17. .container h3 {
    18.   font-size: 18px;
    19.   color: #666;
    20.   font-weight: normal;
    21.   text-align: center;
    22.   line-height: 100px;
    23. }
    24. .container .sub-list {
    25.   background-color: #fff;
    26. }
    27. .container .sub-list ul {
    28.   display: flex;
    29.   padding: 0 32px;
    30.   flex-wrap: wrap;
    31. }
    32. .container .sub-list ul li {
    33.   width: 168px;
    34.   height: 160px;
    35. }
    36. .container .sub-list ul li a {
    37.   text-align: center;
    38.   display: block;
    39.   font-size: 14px;
    40. }
    41. .container .sub-list ul li a img {
    42.   width: 100px;
    43.   height: 100px;
    44. }
    45. .container .sub-list ul li a p {
    46.   line-height: 40px;
    47. }
    48. .container .sub-list ul li a:hover {
    49.   color: var(--xtx-color);
    50. }
    51. .ref-goods {
    52.   background-color: #fff;
    53.   margin-top: 20px;
    54.   position: relative;
    55. }
    56. .ref-goods .head .xtx-more {
    57.   position: absolute;
    58.   top: 20px;
    59.   right: 20px;
    60. }
    61. .ref-goods .head .tag {
    62.   text-align: center;
    63.   color: #999;
    64.   font-size: 20px;
    65.   position: relative;
    66.   top: -20px;
    67. }
    68. .ref-goods .body {
    69.   display: flex;
    70.   justify-content: flex-start;
    71.   flex-wrap: wrap;
    72.   padding: 0 65px 30px;
    73. }
    74. .ref-goods .body .none {
    75.   height: 220px;
    76.   text-align: center;
    77.   width: 100%;
    78.   line-height: 220px;
    79.   color: #999;
    80. }

    2.学习反馈-省市区切换

    需求：完成省市区切换效果

    步骤：

    1. 设置省份数据到下拉菜单
    2. 切换省份，设置城市数据到下拉菜单，并清空地区下拉菜单
    3. 切换城市，设置地区数据到下拉菜单

    index.js

    1. /**
    2.  * 目标1：完成省市区下拉列表切换
    3.  *  1.1 设置省份下拉菜单数据
    4.  *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
    5.  *  1.3 切换城市，设置地区下拉菜单数据
    6.  */
    7. // 1.1 设置省份下拉菜单数据
    8. axios({
    9.     url: 'http://hmajax.itheima.net/api/province'
    10.   }).then(result => {
    11.     const optionStr = result.data.list.map(pname => `<option value="${pname}">${pname}</option>`).join('')
    12.     document.querySelector('.province').innerHTML = `<option value="">省份</option>` + optionStr
    13.   })
    14.   
    15.   // 1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
    16.   document.querySelector('.province').addEventListener('change', async e => {
    17.     // 获取用户选择省份名字
    18.     // console.log(e.target.value)
    19.     const result = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname: e.target.value } })
    20.     const optionStr = result.data.list.map(cname => `<option value="${cname}">${cname}</option>`).join('')
    21.     // 把默认城市选项+下属城市数据插入select中
    22.     document.querySelector('.city').innerHTML = `<option value="">城市</option>` + optionStr
    23.   
    24.     // 清空地区数据
    25.     document.querySelector('.area').innerHTML = `<option value="">地区</option>`
    26.   })
    27.   
    28.   // 1.3 切换城市，设置地区下拉菜单数据
    29.   document.querySelector('.city').addEventListener('change', async e => {
    30.     console.log(e.target.value)
    31.     const result = await axios({url: 'http://hmajax.itheima.net/api/area', params: {
    32.       pname: document.querySelector('.province').value,
    33.       cname: e.target.value
    34.     }})
    35.     console.log(result)
    36.     const optionStr = result.data.list.map(aname => `<option value="${aname}">${aname}</option>`).join('')
    37.     console.log(optionStr)
    38.     document.querySelector('.area').innerHTML = `<option value="">地区</option>` + optionStr
    39.   })
    40.   
    41.   /**
    42.    * 目标2：收集数据提交保存
    43.    *  2.1 监听提交的点击事件
    44.    *  2.2 依靠插件收集表单数据
    45.    *  2.3 基于axios提交保存，显示结果
    46.    */
    47.   // 2.1 监听提交的点击事件
    48.   document.querySelector('.submit').addEventListener('click', async () => {
    49.     // 2.2 依靠插件收集表单数据
    50.     const form = document.querySelector('.info-form')
    51.     const data = serialize(form, { hash: true, empty: true })
    52.     console.log(data)
    53.     // 2.3 基于axios提交保存，显示结果
    54.     try {
    55.       const result = await axios({
    56.         url: 'http://hmajax.itheima.net/api/feedback',
    57.         method: 'POST',
    58.         data
    59.       })
    60.       console.log(result)
    61.       alert(result.data.message)
    62.     } catch (error) {
    63.       console.dir(error)
    64.       alert(error.response.data.message)
    65.     }
    66.   })

    index.html

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <!-- 初始化样式 -->
    9.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
    10.   <!-- 引入bootstrap.css -->
    11.   <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    12.   <!-- 核心样式 -->
    13.   <link rel="stylesheet" href="./css/index.css">
    14.   <title>学习反馈</title>
    15. </head>
    16.  
    17. <body>
    18.   <div class="container">
    19.     <h4 class="stu-title">学习反馈</h4>
    20.     <img class="bg" src="./img/head.png" alt="">
    21.     <div class="item-wrap">
    22.       <div class="hot-area">
    23.         <span class="hot">热门校区</span>
    24.         <ul class="nav">
    25.           <li><a target="_blank" href="http://bjcp.itheima.com/">北京</a> </li>
    26.           <li><a target="_blank" href="http://sh.itheima.com/">上海</a> </li>
    27.           <li><a target="_blank" href="http://gz.itheima.com/">广州</a> </li>
    28.           <li><a target="_blank" href="http://sz.itheima.com/">深圳</a> </li>
    29.         </ul>
    30.       </div>
    31.       <form class="info-form">
    32.         <div class="area-box">
    33.           <span class="title">地区选择</span>
    34.           <select name="province" class="province">
    35.             <option value="">省份</option>
    36.           </select>
    37.           <select name="city" class="city">
    38.             <option value="">城市</option>
    39.           </select>
    40.           <select name="area" class="area">
    41.             <option value="">地区</option>
    42.           </select>
    43.         </div>
    44.         <div class="area-box">
    45.           <span class="title">您的称呼</span>
    46.           <input type="text" name="nickname" class="nickname"  value="播仔">
    47.         </div>
    48.         <div class="area-box">
    49.           <span class="title">宝贵建议</span>
    50.           <textarea type="text" name="feedback" class="feedback" placeholder="您对AJAX阶段课程宝贵的建议"></textarea>
    51.         </div>
    52.         <div class="area-box">
    53.           <button type="button" class="btn btn-secondary submit">
    54.             确定提交
    55.           </button>
    56.         </div>
    57.       </form>
    58.     </div>
    59.   </div>
    60.   <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
    61.   <script src="./js/form-serialize.js"></script>
    62.   <!-- 核心代码 -->
    63.   <script src="./js/index.js"></script>
    64. </body>
    65.  
    66. </html>

    index.css

    1. .container {
    2.   width: 1000px;
    3.   padding-top: 20px;
    4.   margin: 0 auto 0;
    5.   position: relative;
    6. }
    7.  
    8. .container .stu-title {
    9.   font-weight: 900;
    10.   font-size: 36px;
    11. }
    12.  
    13. .container .bg {
    14.   display: block;
    15.   width: 100%;
    16. }
    17.  
    18. .item-wrap .hot-area {
    19.   display: flex;
    20.   margin-bottom: 20px;
    21. }
    22.  
    23. .item-wrap .hot-area .hot {
    24.   color: #c32f32;
    25.   font-weight: 600;
    26.   margin-right: 20px;
    27. }
    28.  
    29.  
    30. .item-wrap .nav {
    31.   display: flex;
    32. }
    33.  
    34. .item-wrap .nav li {
    35.   margin-right: 10px;
    36. }
    37.  
    38. .item-wrap .nav li a {
    39.   text-decoration: none;
    40.   color: black;
    41. }
    42.  
    43.  
    44. .item-wrap .title {
    45.   font-weight: 600;
    46.   white-space: nowrap;
    47.   margin-right: 20px;
    48. }
    49.  
    50. .item-wrap select {
    51.   width: 150px;
    52.   height: 40px;
    53.   font-size: 14px;
    54.   color: black;
    55.   letter-spacing: 0;
    56.   font-weight: 400;
    57.   background: #FFFFFF;
    58.   border: 1px solid rgba(232, 232, 233, 1);
    59.   border-radius: 4px;
    60.   padding: 10px;
    61.   outline: none;
    62.   margin-right: 10px;
    63.  
    64. }
    65.  
    66. .item-wrap select option {
    67.   font-weight: normal;
    68.   display: block;
    69.   white-space: nowrap;
    70.   min-height: 1.2em;
    71.   padding: 0px 2px 1px;
    72.   font-size: 16px;
    73.  
    74. }
    75.  
    76. .item-wrap input {
    77.   font-weight: normal;
    78.   display: block;
    79.   white-space: nowrap;
    80.   min-height: 1.2em;
    81.   padding: 0px 2px 1px;
    82.   height: 40px;
    83.   font-size: 16px;
    84.   border: 1px solid rgba(232, 232, 233, 0.682);
    85.   color: black;
    86. }
    87.  
    88. .item-wrap .feedback {
    89.   width: 400px;
    90.   height: 150px;
    91.   border: 1px solid rgba(232, 232, 233, 0.682);
    92. }
    93.  
    94. .item-wrap .area-box {
    95.   margin-bottom: 20px;
    96.   display: flex;
    97.   align-items: center;
    98. }
    99.  
    100. .feedback::-webkit-input-placeholder {
    101.   /* WebKit browsers */
    102.   color: #BFBFBF;
    103. }
    104.  
    105. .feedback:-moz-placeholder {
    106.   /* Mozilla Firefox 4 to 18 */
    107.   color: #BFBFBF;
    108. }
    109.  
    110. .feedback::-moz-placeholder {
    111.   /* Mozilla Firefox 19+ */
    112.   color: #BFBFBF;
    113. }
    114.  
    115. .feedback:-ms-input-placeholder {
    116.   /* Internet Explorer 10+ */
    117.   color: #BFBFBF;
    118. }

  • 相关阅读:
    41.说说Promise自身的静态方法
    Flutter实战-请求封装(一)
    给短视频添加上下图水印的话需要怎么批量操作
    【Java毕设】基于idea Java的在线考试系统（附源码+课件）
    eProsima Fast DDS(1)
    千亿IT运维市场，产品要凭实力说话
    加工制造业智慧采购系统解决方案：助力企业实现全流程采购一体化协同
    【数据结构】单链表的特点
    JVM-字节码
    JavaScript之BOM复习（54th）
  • 原文地址：https://blog.csdn.net/weixin_48719464/article/details/138098601