ajax 的 get， post 请求;实战：选项卡和一键换肤----0408

1.演示 Ajax 的 get,post 请求

1.1 ajax-get 请求

<button>ajax-get请求</button>
<p></p>
<script>
  const btn = document.querySelector("button");
  btn.onclick = () => {
    // 1.创建 xhr 对象
    const xhr = new XMLHttpRequest();
    // 2.配置 xhr 参数
    xhr.open("get", "test.php?id=2");
    xhr.responseType = "json";
    // 3.处理 xhr 响应
    xhr.onload = () => {
      // 将返回的数据展示到页面
      let user = `${xhr.response.name}(${xhr.response.email})`;
      document.querySelector("p").textContent = user;
    };
    xhr.onerror = () => consle.log("Error");
    // 4.发送 xhr 请求：xhr.send(...)
    xhr.send(null);
  };
</script>

1.2 ajax-post 请求

<div class="login">
  <p>用户登录</p>
  <form action="" onsubmit="return false">
    <label for="email">邮箱:</label>
    <input type="email" name="email" id="email" placeholder="demo@email.com" />
    <label for="password">密码:</label>
    <input type="password" name="password" id="password" placeholder="不少于6位" />
    <button>提交</button>
    <span class="tips"></span>
  </form>
</div>
<script>
  const form = document.querySelector(".login form");
  const btn = document.querySelector(".login button");
  const tips = document.querySelector(".tips");
  btn.onclick = ev => {
    let data = new FormData(form);
    // 禁止默认提交行为
    ev.preventDefault();
    // 1.创建 xhr 对象
    const xhr = new XMLHttpRequest();
    // 2.配置 xhr 参数
    xhr.open("post", "test2.php");
    // 3.处理 xhr 响应
    xhr.onload = () => {
      // 将返回的数据展示到页面
      tips.textContent = xhr.response;
    };
    xhr.onerror = () => consle.log("Error");
    // 4.发送 xhr 请求：xhr.send(...)
    xhr.send(data);
  };
</script>

2.选顶卡

<div class="tabs">
  <!-- 导航 -->
  <ul class="tab">
    <li class="active" data-index="1">省内</li>
    <li data-index="2">国内</li>
    <li data-index="3">国际</li>
  </ul>
  <!-- 与导航标签页对应的详情列表 -->
  <ul data-index="1" class="item active">
    <li><a href="">新华社曝安徽亳州麦田“长”出</a></li>
    <li><a href="">新华社曝安徽亳州麦田“长”出</a></li>
    <li><a href="">新华社曝安徽亳州麦田“长”出</a></li>
    <li><a href="">新华社曝安徽亳州麦田“长”出</a></li>
  </ul>
  <ul data-index="2" class="item">
    <li><a href="">武汉机场跨境电商进出口猛</a></li>
    <li><a href="">武汉机场跨境电商进出口猛</a></li>
    <li><a href="">武汉机场跨境电商进出口猛</a></li>
    <li><a href="">武汉机场跨境电商进出口猛增</a></li>
  </ul>
  <ul data-index="3" class="item">
    <li><a href="">大湾区国际信息科技协会在港成立</a></li>
    <li><a href="">大湾区国际信息科技协会在港成立</a></li>
    <li><a href="">大湾区国际信息科技协会在港成立</a></li>
    <li><a href="">大湾区国际信息科技协会在港成立</a></li>
  </ul>
</div>
<script>
  // 事件代理实现导航的切换
  const tab = document.querySelector(".tab");
  const items = document.querySelectorAll(".item");
  tab.onclick = ev => {
    // 1.清空之前的激活样式，并将当前导航设置为激活状态
    [...tab.children].forEach(item => item.classList.remove("active"));
    ev.target.classList.add("active");
    // 2.根据 data-index 来确定应该将哪个列表进行激活并显示出来
    items.forEach(item => item.classList.remove("active"));
    // filter():匹配 data-index 中，与点击按钮相同的值，并设置激活样式
    [...items]
      .filter(item => item.dataset.index === ev.target.dataset.index)
      .pop()
      .classList.add("active");
  };
</script>

css 文件：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #555;
}
a:hover {
  text-decoration: underline;
  color: red;
}
li {
  list-style: none;
  line-height: 1.6em;
}
li:hover {
  cursor: default;
}
.tabs {
  width: 300px;
  height: 300px;
  margin: 30px;
  background-color: #e6e6e6;
  display: flex;
  flex-direction: column;
}
.tab {
  height: 36px;
  display: flex;
}
.tab li {
  flex: auto;
  text-align: center;
  line-height: 36px;
  background-color: #fff;
}
.tab li.active {
  background-color: #e6e6e6;
}
.tab li:hover {
  cursor: pointer;
}
/* 默认所有选项卡只有一个显示,其它隐藏 */
.item {
  padding: 20px;
  display: none;
}
.item.active {
  display: block;
}

3.一键换肤

<div class="container">
  <img src="./images/1.jpg" alt="" />
  <img src="./images/2.jpg" alt="" />
  <img src="./images/3.jpg" alt="" />
</div>
<script>
  // 事件代理
  const box = document.querySelector(".container");
  box.onclick = function (ev) {
    // body
    const body = document.body;
    // 新的背景图片
    let imgUrl = `url('${ev.target.src}')`;
    body.style.backgroundImage = imgUrl;
  };
  // 使用箭头函数来简化
  // document.querySelector(".container").onclick = (ev) =>
  //   (document.body.style.backgroundImage = `url('${ev.target.src}')`);
</script>

css 文件：

.container {
  width: 300px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
}
.container > img {
  width: 100%;
  border: 3px solid #fff;
  opacity: 0.6;
}
.container > img:active {
  opacity: 1;
}
.container > img:hover {
  opacity: 1;
  cursor: pointer;
  width: 105%;
}
body {
  background-image: url("./images/1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}