AJAX——案例

1.商品分类

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

步骤:

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

index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>案例_分类导航</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 大容器 -->
  <div class="container">
    <div class="sub-list">
      <div class="item">
        <h3>分类名字</h3>
        <ul>
          <li>
            <a href="javascript:;">
              <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
              <p>巧克力</p>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
              <p>巧克力</p>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
              <p>巧克力</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标:把所有商品分类“同时”渲染到页面上
     *  1. 获取所有一级分类数据
     *  2. 遍历id,创建获取二级分类请求
     *  3. 合并所有二级分类Promise对象
     *  4. 等待同时成功后,渲染页面
    */
    // 1. 获取所有一级分类数据
    axios({
      url:'http://hmajax.itheima.net/api/category/top'
    }).then(result => {
      console.log(result)
      // 2. 遍历id,创建获取二级分类请求
      const secPromiseList = result.data.data.map(item => {
        return axios({
          url:'http://hmajax.itheima.net/api/category/sub',
          params: {
            id: item.id  // 一级分类id
          }
        })
      })
      console.log(secPromiseList) // [二级分类请求Promise对象,二级分类请求Promise对象……]
      // 3. 合并所有二级分类Promise对象
      const p = Promise.all(secPromiseList)
      p.then(result => {
        console.log(result)
        // 4. 等待同时成功后,渲染页面
        const htmlStr = result.map(item => {
          const dataObj = item.data.data // 取出关键数据对象
          return `<div class="item">
        <h3>${dataObj.name}</h3>
        <ul>
          ${dataObj.children.map(item => {
            return `<li>
            <a href="javascript:;">
              <img src="${item.picture}">
              <p>${item.name}</p>
            </a>
          </li>`
          }).join('')}
        </ul>
      </div>`
        }).join('')

        console.log(htmlStr)
        document.querySelector('.sub-list').innerHTML = htmlStr
      })
    })

  </script>
</body>

</html>

index.css代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #333;
}
ul {
  list-style: none;
}
.container {
  width: 980px;
  margin: 0 auto;
}
.container h3 {
  font-size: 18px;
  color: #666;
  font-weight: normal;
  text-align: center;
  line-height: 100px;
}
.container .sub-list {
  background-color: #fff;
}
.container .sub-list ul {
  display: flex;
  padding: 0 32px;
  flex-wrap: wrap;
}
.container .sub-list ul li {
  width: 168px;
  height: 160px;
}
.container .sub-list ul li a {
  text-align: center;
  display: block;
  font-size: 14px;
}
.container .sub-list ul li a img {
  width: 100px;
  height: 100px;
}
.container .sub-list ul li a p {
  line-height: 40px;
}
.container .sub-list ul li a:hover {
  color: var(--xtx-color);
}
.ref-goods {
  background-color: #fff;
  margin-top: 20px;
  position: relative;
}
.ref-goods .head .xtx-more {
  position: absolute;
  top: 20px;
  right: 20px;
}
.ref-goods .head .tag {
  text-align: center;
  color: #999;
  font-size: 20px;
  position: relative;
  top: -20px;
}
.ref-goods .body {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0 65px 30px;
}
.ref-goods .body .none {
  height: 220px;
  text-align: center;
  width: 100%;
  line-height: 220px;
  color: #999;
}

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

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

步骤:

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

index.js

/**
 * 目标1:完成省市区下拉列表切换
 *  1.1 设置省份下拉菜单数据
 *  1.2 切换省份,设置城市下拉菜单数据,清空地区下拉菜单
 *  1.3 切换城市,设置地区下拉菜单数据
 */
// 1.1 设置省份下拉菜单数据
axios({
    url: 'http://hmajax.itheima.net/api/province'
  }).then(result => {
    const optionStr = result.data.list.map(pname => `<option value="${pname}">${pname}</option>`).join('')
    document.querySelector('.province').innerHTML = `<option value="">省份</option>` + optionStr
  })
  
  // 1.2 切换省份,设置城市下拉菜单数据,清空地区下拉菜单
  document.querySelector('.province').addEventListener('change', async e => {
    // 获取用户选择省份名字
    // console.log(e.target.value)
    const result = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname: e.target.value } })
    const optionStr = result.data.list.map(cname => `<option value="${cname}">${cname}</option>`).join('')
    // 把默认城市选项+下属城市数据插入select中
    document.querySelector('.city').innerHTML = `<option value="">城市</option>` + optionStr
  
    // 清空地区数据
    document.querySelector('.area').innerHTML = `<option value="">地区</option>`
  })
  
  // 1.3 切换城市,设置地区下拉菜单数据
  document.querySelector('.city').addEventListener('change', async e => {
    console.log(e.target.value)
    const result = await axios({url: 'http://hmajax.itheima.net/api/area', params: {
      pname: document.querySelector('.province').value,
      cname: e.target.value
    }})
    console.log(result)
    const optionStr = result.data.list.map(aname => `<option value="${aname}">${aname}</option>`).join('')
    console.log(optionStr)
    document.querySelector('.area').innerHTML = `<option value="">地区</option>` + optionStr
  })
  
  /**
   * 目标2:收集数据提交保存
   *  2.1 监听提交的点击事件
   *  2.2 依靠插件收集表单数据
   *  2.3 基于axios提交保存,显示结果
   */
  // 2.1 监听提交的点击事件
  document.querySelector('.submit').addEventListener('click', async () => {
    // 2.2 依靠插件收集表单数据
    const form = document.querySelector('.info-form')
    const data = serialize(form, { hash: true, empty: true })
    console.log(data)
    // 2.3 基于axios提交保存,显示结果
    try {
      const result = await axios({
        url: 'http://hmajax.itheima.net/api/feedback',
        method: 'POST',
        data
      })
      console.log(result)
      alert(result.data.message)
    } catch (error) {
      console.dir(error)
      alert(error.response.data.message)
    }
  })
  

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 初始化样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
  <!-- 引入bootstrap.css -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <!-- 核心样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <title>学习反馈</title>
</head>

<body>
  <div class="container">
    <h4 class="stu-title">学习反馈</h4>
    <img class="bg" src="./img/head.png" alt="">
    <div class="item-wrap">
      <div class="hot-area">
        <span class="hot">热门校区</span>
        <ul class="nav">
          <li><a target="_blank" href="http://bjcp.itheima.com/">北京</a> </li>
          <li><a target="_blank" href="http://sh.itheima.com/">上海</a> </li>
          <li><a target="_blank" href="http://gz.itheima.com/">广州</a> </li>
          <li><a target="_blank" href="http://sz.itheima.com/">深圳</a> </li>
        </ul>
      </div>
      <form class="info-form">
        <div class="area-box">
          <span class="title">地区选择</span>
          <select name="province" class="province">
            <option value="">省份</option>
          </select>
          <select name="city" class="city">
            <option value="">城市</option>
          </select>
          <select name="area" class="area">
            <option value="">地区</option>
          </select>
        </div>
        <div class="area-box">
          <span class="title">您的称呼</span>
          <input type="text" name="nickname" class="nickname"  value="播仔">
        </div>
        <div class="area-box">
          <span class="title">宝贵建议</span>
          <textarea type="text" name="feedback" class="feedback" placeholder="您对AJAX阶段课程宝贵的建议"></textarea>
        </div>
        <div class="area-box">
          <button type="button" class="btn btn-secondary submit">
            确定提交
          </button>
        </div>
      </form>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
  <script src="./js/form-serialize.js"></script>
  <!-- 核心代码 -->
  <script src="./js/index.js"></script>
</body>

</html>

index.css

.container {
  width: 1000px;
  padding-top: 20px;
  margin: 0 auto 0;
  position: relative;
}

.container .stu-title {
  font-weight: 900;
  font-size: 36px;
}

.container .bg {
  display: block;
  width: 100%;
}

.item-wrap .hot-area {
  display: flex;
  margin-bottom: 20px;
}

.item-wrap .hot-area .hot {
  color: #c32f32;
  font-weight: 600;
  margin-right: 20px;
}


.item-wrap .nav {
  display: flex;
}

.item-wrap .nav li {
  margin-right: 10px;
}

.item-wrap .nav li a {
  text-decoration: none;
  color: black;
}


.item-wrap .title {
  font-weight: 600;
  white-space: nowrap;
  margin-right: 20px;
}

.item-wrap select {
  width: 150px;
  height: 40px;
  font-size: 14px;
  color: black;
  letter-spacing: 0;
  font-weight: 400;
  background: #FFFFFF;
  border: 1px solid rgba(232, 232, 233, 1);
  border-radius: 4px;
  padding: 10px;
  outline: none;
  margin-right: 10px;

}

.item-wrap select option {
  font-weight: normal;
  display: block;
  white-space: nowrap;
  min-height: 1.2em;
  padding: 0px 2px 1px;
  font-size: 16px;

}

.item-wrap input {
  font-weight: normal;
  display: block;
  white-space: nowrap;
  min-height: 1.2em;
  padding: 0px 2px 1px;
  height: 40px;
  font-size: 16px;
  border: 1px solid rgba(232, 232, 233, 0.682);
  color: black;
}

.item-wrap .feedback {
  width: 400px;
  height: 150px;
  border: 1px solid rgba(232, 232, 233, 0.682);
}

.item-wrap .area-box {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.feedback::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #BFBFBF;
}

.feedback:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #BFBFBF;
}

.feedback::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #BFBFBF;
}

.feedback:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #BFBFBF;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/568643.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Pycharm代码规范与代码格式化插件安装

给大家分享两个PyCharm编辑器的插件&#xff0c;分别是pylint与autopep8&#xff0c;主要用来提高我们在使用python进行自动化测试编写以及性能测试脚本编写过程中的代码质量、可读性与美观性。 pylint&#xff1a; ● 代码检查工具&#xff1a;它可以帮助检查代码中的错误、…

pnpm 安装后 node_modules 是什么结构?为什么 webpack 不识别 pnpm 安装的包?

本篇研究&#xff1a;使用 pnpm 安装依赖时&#xff0c;node_modules 下是什么结构 回顾 npm3 之前&#xff1a;依赖树 缺点&#xff1a; frequently packages were creating too deep dependency trees, which caused long directory paths issue on Windowspackages were c…

明日方舟游戏助手:一键完成日常任务 | 开源日报 No.233

MaaAssistantArknights/MaaAssistantArknights Stars: 11.6k License: AGPL-3.0 MaaAssistantArknights 是一款《明日方舟》游戏的小助手&#xff0c;基于图像识别技术&#xff0c;支持一键完成全部日常任务。 刷理智、掉落识别及上传企鹅物流智能基建换班、自动计算干员效率…

《ElementPlus 与 ElementUI 差异集合》el-select 差异点,如:高、宽、body插入等

宽度 Element UI 父元素不限制宽度时&#xff0c;默认有个宽度 207px&#xff1b; 父元素有固定宽度时&#xff0c;以父元素宽度为准&#xff1b; Element Plus 父元素不限制宽度时&#xff0c;默认100%&#xff1b; 父元素有固定宽度时&#xff0c;以父元素宽度为准&#x…

哪些因素影响了PCB电路板切割精度?

PCB电路板切割是电子制造过程中一个至关重要的环节&#xff0c;其精度对后续工序的质量和效率具有决定性影响。因此&#xff0c;了解影响PCB电路板切割精度的原因&#xff0c;对于提高电子产品的质量和生产效率具有重要意义。 1. PCB分板机稳定性 PCB分板机的性能直接影响到切…

李沐62_序列到序列学习seq2seq——自学笔记

"英&#xff0d;法”数据集来训练这个机器翻译模型。 !pip install --upgrade d2l0.17.5 #d2l需要更新import collections import math import torch from torch import nn from d2l import torch as d2l循环神经网络编码器。 我们使用了嵌入层&#xff08;embedding l…

广东理工学院携手泰迪智能科技成功部署人工智能实验室

广东理工学院是经国家教育部批准设立的全日制普通本科院校&#xff0c;入选全国应用型人才培养工程培养基地、国家级众创空间试点单位、广东省高校电子商务人才孵化基地。开设34个本科专业&#xff0c;涵盖工学、经济学、管理学、文学、艺术学、教育学等6大学科门类&#xff0c…

【docker】拉取人大金仓KingbaseES数据库镜像速度很慢问题

作为一种新兴的虚拟化方式&#xff0c;Docker 跟传统的虚拟化方式相比具有众多的优势。 对于学习新技术、快速搭建实验环境等是很不错的选择。优势大致总结如下&#xff1a; 1.镜像拉取速度对比 速度前后对比&#xff0c;提升10倍不止&#xff0c;很快将镜像文件下载至本地。 …

Java常见面试题总结

文章目录 1. 什么是线程和进程?2. 请简要描述线程与进程的关系,区别及优缺点&#xff1f;3. 什么是堆和方法区&#xff1f;4. 并发与并行的区别5. 同步和异步的区别6.为什么要使用多线程? 优点&#xff1f;&#xff08;重要&#xff09;7. 使用多线程可能带来什么问题?8. 如…

python爬虫 - 爬取html中的script数据(zum.com新闻信息 )

文章目录 1. 分析页面内容数据格式2. 使用re.findall方法&#xff0c;编写爬虫代码3. 使用re.search 方法&#xff0c;编写爬虫代码 1. 分析页面内容数据格式 &#xff08;1&#xff09;打开 https://zum.com/ &#xff08;2&#xff09;按F12&#xff08;或 在网页上右键 --…

SpringCloud Alibaba--nacos简介和配置管理和登录

目录 一.理论基础 二.nacos 2.1 简介 2.2 安装 三.父项目 三.生产者 3.1 配置依赖 3.2 配置文件 3.3 启动类 3.4 控制类 四.消费者 4.1 配置依赖 4.2 配置文件 4.3 启动类 4.4 feign的接口 五.效果 六.负载均衡--权重算法 6.1重启nacos 6.2 设置权重 6.3 设…

SSH Key生成

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

「React Native」为什么要选择 React Native 作为的跨端方案

文章目录 前言一、常见因素二、举个栗子2.1 项目背景2.2 为什么选择 React Native2.3 项目实施2.4 成果总结 前言 没有完美的跨端技术&#xff0c;只有适合的场景。脱离适用场景去谈跨端技术没有什么意义。 一、常见因素 共享代码库&#xff1a; React Native 允许开发者编写…

一个docker配置mysql主从服务器

这也就是因为穷&#xff0c;不然谁用一个docker配置主从&#xff0c;哈哈 既然成功了就记录下。过程挺折磨人的。 首先要保证你的电脑安装好了docker 为了保证docker当中主从能正常连网&#xff0c;现在docker里面创建一个网络环境 docker network create --driver bridge mysq…

MATLAB的几种边缘检测算子(Sobel、Prewitt、Laplacian)

MATLAB的几种边缘检测算子(Sobel、Prewitt、Laplacian) clc;close all;clear all;warning off;%清除变量 rand(seed, 100); randn(seed, 100); format long g;% 读取图像 image imread(lena.png); % 转换为灰度图像 gray_image rgb2gray(image); % 转换为double类型以进行计算…

Vue3中使用无缝滚动插件vue3-seamless-scroll

官网&#xff1a;https://www.npmjs.com/package/vue-seamless-scroll 1、实现效果文字描述&#xff1a; 表格中的列数据进行横向无缝滚动&#xff0c;某一列进行筛选的时候&#xff0c;重新请求后端的数据&#xff0c;进行刷新 2、安装&#xff1a;npm i vue3-seamless-scrol…

CentOS7/RHEL7 root密码破解

我们知道root是CentOS7/RHEL7系统的管理员用户&#xff0c;一般情况下&#xff0c;我们是不会把其密码忘记的&#xff0c;如果万一忘记了&#xff0c;如果破解root密码呢&#xff0c;今天就为大家详细讲讲。 1.CentOS7/RHEL7 root密码破解 以VMware虚拟机上CentOS7系统为例 …

【js】解决自动生成颜色时相邻颜色视觉相似问题的技术方案

解决自动生成颜色时相邻颜色视觉相似问题的技术方案 在进行大规模颜色生成时&#xff0c;特别是在数据可视化、用户界面设计等应用领域&#xff0c;一个常见的挑战是确保相邻颜色在视觉上具有足够的区分度。本文介绍的方法通过结合黄金分割比与饱和度、亮度的周期性变化&#…

Web3 游戏周报(4.14-4.20)

【4.14-20】Web3 游戏行业动态&#xff1a; 前迪士尼老板与漫威、星球大战人才携手推出 Web3 游戏工作室 加密集换式卡牌游戏《Fantasy》在 Blast 主网上线 加密游戏工作室 Avalon 融资 1,000 万美元&#xff0c;Hashed 领投 Faraway 收购 Yuga Labs 旗下两大游戏 IP“HV-MT…

结构型设计模式

享元模式 享元模式&#xff08;Flyweight Pattern&#xff09;是一种用于性能优化的设计模式&#xff0c;它通过共享尽可能多的相似对象来减少内存使用&#xff0c;尤其是在大量对象的情况下非常有效。这个模式是在对象数量多而对象状态大部分可共享的情况下实现的。 享元模式…