亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 70
粉絲 4
評論 5
訪問量 122156
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JavaScript:演示Ajax的get和post請求，練習選頂卡和換膚案例
JiaJieChen
原創(chuàng)
986人瀏覽過

JavaScript:演示Ajax的get和post請求，練習選頂卡和換膚案例

Ajax 異步請求

特別提示: 異步請求不要使用live server插件,必須創(chuàng)建一個本地服務器環(huán)境

1. 同步與異步

以前端請求,后端響應為例

  • 同步: 前端發(fā)請求, 必須等到后端響應完成,才允許發(fā)送另一個請求
  • 異步: 前端發(fā)請求后不等待后端響應結(jié)果繼續(xù)執(zhí)行,后端響應完成通過事件通知前端處理

2. XMLHttpRequest 對象

XMLHttpRequest是瀏覽器對象,而非 JS 內(nèi)置對象

2.1 xhr 請求步驟

  1. 創(chuàng)建 xhr 對象: const xhr = new XMLHttpRequest()
  2. 配置 xhr 參數(shù): xhr.open(type, url)
  3. 處理 xhr 響應: xhr.onload = (...) => {...}
  4. 發(fā)送 xhr 請求: xhr.send(...)

2.2. xhr 對象常用屬性

序號 方法 描述
1 responseType 設置響應類型
2 response 響應正文

2.3 xhr 對象常用方法

序號 方法 描述
1 open(type,url) 配置請求參數(shù)
2 send(data/null) 發(fā)送請求

2.4. xhr 對象常用事件

序號 事件 描述
1 load() 請求成功
2 error() 請求失敗

3. FormData 對象

FormData是表單數(shù)據(jù)構(gòu)造器

序號 方法 描述
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. 創(chuàng)建 xhr 對象: `const xhr = new XMLHttpRequest()`
  16.       // 2. 配置 xhr 參數(shù): `xhr.open(type, url)`
  17.       // 3. 處理 xhr 響應: `xhr.onload = (...) => {...}`
  18.       // 4. 發(fā)送 xhr 請求: `xhr.send(...)`
  20.       //首先拿到按鈕
  21.       const btn = document.querySelector("button");
  23.       btn.onclick = () => {
  24.         //創(chuàng)建 xhr 對象
  25.         const xhr = new XMLHttpRequest();
  27.         //配置xhr參數(shù)
  28.         xhr.open("get", "test1.php?id=3");
  30.         //responseType 響應類型將服務器數(shù)據(jù)解析為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.         //發(fā)送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位數(shù)"
  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. 創(chuàng)建 xhr 對象: `const xhr = new XMLHttpRequest()`
  81.       //   2. 配置 xhr 參數(shù): `xhr.open(type, url)`
  82.       //   3. 處理 xhr 響應: `xhr.onload = (...) => {...}`
  83.       //   4. 發(fā)送 xhr 請求: `xhr.send(...)`
  84.       btn.onclick = (ev) => {
  85.         //禁用默認行為
  86.         ev.preventDefault();
  88.         //創(chuàng)建xhr對象
  89.         const xhr = new XMLHttpRequest();
  91.         //配置xhr參數(shù)
  92.         xhr.open("post", "test2.php");
  94.         //處理xhr響應
  95.         //把服務器驗證正確的數(shù)據(jù)傳遞到tips中
  96.         xhr.onload = () => {
  97.           tips.innerHTML = xhr.response;
  98.         };
  100.         //發(fā)送xhr請求,用 new FormData 傳遞表單數(shù)據(jù)
  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.     <!-- 創(chuàng)建選項卡模板 -->
  14.     <div class="xxk">
  15.       <!-- 這個是選項卡導航 -->
  16.       <ul class="nav">
  17.         <!-- 用 data-index自定義屬性來對導航內(nèi)容進行綁定 -->
  18.         <li class="active" data-index="1">省內(nèi)</li>
  19.         <li data-index="2">國內(nèi)</li>
  20.         <li data-index="3">國際</li>
  21.       </ul>
  23.       <!-- 選項卡導航里面的內(nèi)容 -->
  24.       <!-- data-index="1"綁定省內(nèi) -->
  25.       <ul data-index="1" class="item active">
  26.         <li><a href="">江西已連續(xù)408天無新增本地確診病例...</a></li>
  27.         <li><a href="">參與人次破60萬 江西全民國家安全知識答...</a></li>
  28.         <li><a href="">河北服毒自殺的貨車司機今晨已下葬 此前...</a></li>
  29.       </ul>
  30.       <!-- data-index="2"綁定國內(nèi) -->
  31.       <ul data-index="2" class="item">
  32.         <li><a href="">天津“十四五”將建百萬畝設施農(nóng)業(yè)</a></li>
  33.         <li><a href="">保護生物多樣性 守住自然生態(tài)安全邊界</a></li>
  34.         <li><a href="">強化現(xiàn)代農(nóng)業(yè)科技和物質(zhì)裝備支撐</a></li>
  35.       </ul>
  36.       <!-- data-index="3"綁定國際 -->
  37.       <ul data-index="3" class="item">
  38.         <li><a href="">伊朗原子能組織：納坦茲核設施內(nèi)部供電系統(tǒng)出現(xiàn)故障</a></li>
  39.         <li><a href="">日媒：福島核電站4000個廢棄物集裝箱信息不明</a></li>
  40.         <li><a href="">美國黑人軍官被兩名白人警察攔下毆打 噴辣椒水</a></li>
  41.       </ul>
  42.     </div>
  44.     <script>
  45.       //事件代理實現(xiàn)導航的切換，拿到導航和內(nèi)容
  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.清空之前的激活樣式，并將導航設置激活狀態(tài)
  54.         //將導航用數(shù)組來遍歷
  55.         [...nav.children].forEach((item) => item.classList.remove("active"));
  56.         ev.target.classList.add("active");
  57.         //   //2.根據(jù)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.         //創(chuàng)建一個點擊的新圖片路徑
  65.         let imgSrc = `url('${ev.target.src}')`;
  67.         //然后將body里面的圖片給他替換成點擊的圖片背景
  68.         body.style.backgroundImage = imgSrc;
  69.       };
  70.     </script>
  71.   </body>
  72. </html>
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：很用心
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關(guān)注服務號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學