search

博客列表 >JavaScript:演示Ajax的get和post请求，练习选顶卡和换肤案例

JavaScript:演示Ajax的get和post请求，练习选顶卡和换肤案例

JiaJieChen
JiaJieChen原创
2021年04月12日 13:53:01816浏览

JavaScript:演示Ajax的get和post请求，练习选顶卡和换肤案例

Ajax 异步请求

特别提示: 异步请求不要使用live server插件,必须创建一个本地服务器环境

1. 同步与异步

以前端请求,后端响应为例

  • 同步: 前端发请求, 必须等到后端响应完成,才允许发送另一个请求
  • 异步: 前端发请求后不等待后端响应结果继续执行,后端响应完成通过事件通知前端处理

2. XMLHttpRequest 对象

XMLHttpRequest是浏览器对象,而非 JS 内置对象

2.1 xhr 请求步骤

  1. 创建 xhr 对象: const xhr = new XMLHttpRequest()
  2. 配置 xhr 参数: xhr.open(type, url)
  3. 处理 xhr 响应: xhr.onload = (...) => {...}
  4. 发送 xhr 请求: xhr.send(...)

2.2. xhr 对象常用属性

序号 方法 描述
1 responseType 设置响应类型
2 response 响应正文

2.3 xhr 对象常用方法

序号 方法 描述
1 open(type,url) 配置请求参数
2 send(data/null) 发送请求

2.4. xhr 对象常用事件

序号 事件 描述
1 load() 请求成功
2 error() 请求失败

3. FormData 对象

FormData是表单数据构造器

序号 方法 描述
1 append(name,value) 请求成功
2 delete(name) 请求失败

一.Ajax-GET请求

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>ajax-get请求</title>
  8.   </head>
  9.   <body>
  10.     <button>Ajax-GET请求</button>
  11.     <p></p>
  13.     <script>
  14.       //ajax-get 请求四部曲
  15.       // 1. 创建 xhr 对象: `const xhr = new XMLHttpRequest()`
  16.       // 2. 配置 xhr 参数: `xhr.open(type, url)`
  17.       // 3. 处理 xhr 响应: `xhr.onload = (...) => {...}`
  18.       // 4. 发送 xhr 请求: `xhr.send(...)`
  20.       //首先拿到按钮
  21.       const btn = document.querySelector("button");
  23.       btn.onclick = () => {
  24.         //创建 xhr 对象
  25.         const xhr = new XMLHttpRequest();
  27.         //配置xhr参数
  28.         xhr.open("get", "test1.php?id=3");
  30.         //responseType 响应类型将服务器数据解析为JSON对象
  31.         xhr.responseType = "json";
  33.         //处理xhr响应
  34.         xhr.onload = () => {
  35.           //response 响应正文
  36.           console.log(xhr.response);
  38.           //拿到对象里面的name和email值
  39.           let user = `${xhr.response.name}+${xhr.response.email}`;
  40.           //拿到p标签，把值传到p标签里面去
  41.           let p = document.querySelector("p");
  42.           p.textContent = user;
  43.         };
  45.         //发送xhr请求
  46.         xhr.send(null);
  47.       };
  48.     </script>
  49.   </body>
  50. </html>

二.Ajax-POST请求

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Ajax-POST</title>
  8.     <style>
  9.       :root {
  10.         background-color: lightblue;
  11.       }
  12.       .login {
  13.         display: grid;
  14.         grid-template-columns: 1fr;
  15.         grid-template-rows: 40px 1fr;
  16.         place-items: center;
  17.         border: 1px solid;
  18.         width: 30rem;
  19.         height: 15rem;
  20.         margin: auto;
  21.         background-color: lightseagreen;
  22.         border-radius: 1rem;
  23.       }
  24.       .login > p {
  25.         color: white;
  26.         font-size: 20px;
  27.       }
  28.       .login > form > label {
  29.         color: white;
  30.       }
  31.       .login > form {
  32.         display: grid;
  33.         grid-template-columns: repeat(1, 3rem 1fr);
  34.         grid-template-rows: repeat(4, 1fr);
  35.         gap: 3px;
  37.         padding: 1rem;
  38.       }
  39.       .login > form > button {
  40.         margin-top: 5px;
  41.         width: 13.5rem;
  42.       }
  43.       .login > form > .tips {
  44.         place-items: center;
  45.         grid-area: 4 / 2;
  46.         color: white;
  47.         margin-top: 0.5rem;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <div class="login">
  53.       <p>用户登录</p>
  54.       <form action="">
  55.         <label for="email">邮箱:</label>
  56.         <input
  57.           type="email"
  58.           name="email"
  59.           id="email"
  60.           placeholder="admin@qq.com"
  61.         />
  62.         <label for="password">密码：</label>
  63.         <input
  64.           type="password"
  65.           name="password"
  66.           id="password"
  67.           placeholder="不小于8位数"
  68.           minlength="8"
  69.           maxlength="14"
  70.         />
  71.         <button>提交</button>
  72.         <span class="tips">123123</span>
  73.       </form>
  74.     </div>
  75.     <script>
  76.       //首先拿到表单里面的元素
  77.       const form = document.querySelector(".login form");
  78.       const btn = document.querySelector(".login button");
  79.       const tips = document.querySelector(".tips");
  80.       //   1. 创建 xhr 对象: `const xhr = new XMLHttpRequest()`
  81.       //   2. 配置 xhr 参数: `xhr.open(type, url)`
  82.       //   3. 处理 xhr 响应: `xhr.onload = (...) => {...}`
  83.       //   4. 发送 xhr 请求: `xhr.send(...)`
  84.       btn.onclick = (ev) => {
  85.         //禁用默认行为
  86.         ev.preventDefault();
  88.         //创建xhr对象
  89.         const xhr = new XMLHttpRequest();
  91.         //配置xhr参数
  92.         xhr.open("post", "test2.php");
  94.         //处理xhr响应
  95.         //把服务器验证正确的数据传递到tips中
  96.         xhr.onload = () => {
  97.           tips.innerHTML = xhr.response;
  98.         };
  100.         //发送xhr请求,用 new FormData 传递表单数据
  101.         xhr.send(new FormData(form));
  102.       };
  103.     </script>
  104.   </body>
  105. </html>

三.选项卡案例

html代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>选项卡</title>
  8.     <style>
  9.       @import url(xxk.css);
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <!-- 创建选项卡模板 -->
  14.     <div class="xxk">
  15.       <!-- 这个是选项卡导航 -->
  16.       <ul class="nav">
  17.         <!-- 用 data-index自定义属性来对导航内容进行绑定 -->
  18.         <li class="active" data-index="1">省内</li>
  19.         <li data-index="2">国内</li>
  20.         <li data-index="3">国际</li>
  21.       </ul>
  23.       <!-- 选项卡导航里面的内容 -->
  24.       <!-- data-index="1"绑定省内 -->
  25.       <ul data-index="1" class="item active">
  26.         <li><a href="">江西已连续408天无新增本地确诊病例...</a></li>
  27.         <li><a href="">参与人次破60万 江西全民国家安全知识答...</a></li>
  28.         <li><a href="">河北服毒自杀的货车司机今晨已下葬 此前...</a></li>
  29.       </ul>
  30.       <!-- data-index="2"绑定国内 -->
  31.       <ul data-index="2" class="item">
  32.         <li><a href="">天津“十四五”将建百万亩设施农业</a></li>
  33.         <li><a href="">保护生物多样性 守住自然生态安全边界</a></li>
  34.         <li><a href="">强化现代农业科技和物质装备支撑</a></li>
  35.       </ul>
  36.       <!-- data-index="3"绑定国际 -->
  37.       <ul data-index="3" class="item">
  38.         <li><a href="">伊朗原子能组织：纳坦兹核设施内部供电系统出现故障</a></li>
  39.         <li><a href="">日媒：福岛核电站4000个废弃物集装箱信息不明</a></li>
  40.         <li><a href="">美国黑人军官被两名白人警察拦下殴打 喷辣椒水</a></li>
  41.       </ul>
  42.     </div>
  44.     <script>
  45.       //事件代理实现导航的切换，拿到导航和内容
  46.       const nav = document.querySelector(".nav");
  47.       const items = document.querySelectorAll(".item");
  49.       //建立导航事件属性
  50.       nav.onclick = (ev) => {
  51.         // console.log(ev.currentTarget);
  52.         // console.log(ev.target);
  53.         // 1.清空之前的激活样式，并将导航设置激活状态
  54.         //将导航用数组来遍历
  55.         [...nav.children].forEach((item) => item.classList.remove("active"));
  56.         ev.target.classList.add("active");
  57.         //   //2.根据data-index来确定应该将那个列表进行激活和绑定
  58.         items.forEach((item) => item.classList.remove("active"));
  59.         [...items]
  60.           .filter((item) => item.dataset.index === ev.target.dataset.index)
  61.           .pop(0)
  62.           .classList.add("active");
  63.       };
  64.     </script>
  65.   </body>
  66. </html>

四.换肤案例

测试已拿到容器元素，下面我们来给它添加事件属性

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>一件换肤</title>
  8.     <style>
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       .box {
  15.         width: 300px;
  16.         display: grid;
  17.         grid-template-columns: repeat(3, 1fr);
  18.         grid-template-rows: repeat(3, 1fr);
  19.         gap: 5px;
  20.         margin: 10px auto;
  21.       }
  22.       .box > img {
  23.         width: 100%;
  24.         border: 1px solid white;
  25.         opacity: 0.6;
  26.       }
  27.       .box > img:active {
  28.         opacity: 1;
  29.       }
  30.       .box > img:hover {
  31.         opacity: 1;
  32.         cursor: pointer;
  33.         width: 105%;
  34.       }
  35.       body {
  36.         background-image: url(tupian/1.jpeg);
  37.         background-size: cover;
  38.         background-repeat: no-repeat;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <div class="box">
  44.       <img src="tupian/1.jpeg" alt="" />
  45.       <img src="tupian/2.jpeg" alt="" />
  46.       <img src="tupian/3.jpeg" alt="" />
  47.       <img src="tupian/4.jpeg" alt="" />
  48.       <img src="tupian/5.jpeg" alt="" />
  49.       <img src="tupian/6.jpeg" alt="" />
  50.       <img src="tupian/7.jpeg" alt="" />
  51.       <img src="tupian/8.jpeg" alt="" />
  52.       <img src="tupian/9.jpeg" alt="" />
  53.     </div>
  55.     <script>
  56.       //首先拿到容器的事件代理
  57.       const box = document.querySelector(".box");
  58.       //测试是否拿到
  59.       //   console.log(box);
  60.       box.onclick = function (ev) {
  61.         // console.log(box);
  62.         //拿到body元素
  63.         const body = document.body;
  64.         //创建一个点击的新图片路径
  65.         let imgSrc = `url('${ev.target.src}')`;
  67.         //然后将body里面的图片给他替换成点击的图片背景
  68.         body.style.backgroundImage = imgSrc;
  69.       };
  70.     </script>
  71.   </body>
  72. </html>
上一条：0409作业-懒加载及轮播图下一条：0406作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多