![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
<?php$users = [[‘id’=>1, ‘name’=>’Peter’, ‘email’=>’peter@abc.com’, ‘password’=> md5(‘123456’)],[‘id’=>2, ‘name’=>’Joe’, ‘email’=>’joe@abc.com’,’password’=> md5(‘abc123’)],[‘id’=>3, ‘name’=>’Mary’,’email’=>’mary@abc.com’,’password’ => md5(‘abc456’)],];$id = $_GET[‘id’];$key = array_search($id,array_column($users.’id’));echo json_encode($users[$key]);
xhr.open(type,”test1.php?id=2”);处理 xhr 响应xhr.onload = () => {console.log(xhr.response);};xhr.onerror = () => console.log(object);发送 xhr 请求xhr.send(null)<button>Ajax.Get request</button>
<script>const btn = document.querySelector(“button);btn.onclick = () => {const xhr = new XMLHttpRequest();xhr.open(type,”test1.php?id=2”);}</script>
</head><body><div class="login"><p>Login Name</p><form action="" onsubmit="return false"><label for="email">email:</label><input type="email" name="email" id="email" placeholder="demo@mail.com" /><label form="password">Password</label><input type="password" name="password" id="password" placeholder="minimum 6 " /><button>Submit</button><span class="tips"></span></form><script>const form = document.querySelector(“.login form”);const btn = document.querySelector(“.login button”);const tips = document.querySelector(“.tips”);- #### Ajax post xhr四步骤btn.onclick = (ev) => {ev.preventDefault();const xhr = new XMLHttpRequest();xhr.open(“post”, “test2.php”);xhr.onload = ( => {console.log(xhr.response);})xhr.onerrer = () => console.log(“Error”);xhr:send(new FormData(form);### 2. 选顶卡- 导航tabs,items<div class="tabs"><ul class="tab"><li class="active" data-index="1">Handbags</li><li data-index="2">Wallets</li><li data-index="3">Shoes</li></ul><ul data-index="1" class="item active"><li><a href="">tote bags</a></li><li><a href="">crossbody bags</a></li><li><a href="">belt bags</a></li><li><a href="">mens bags</a></li></ul><ul data-index="2" class="item"><li><a href="">clutch long wallets</a></li><li><a href="">card holders</a></li><li><a href="">short wallets</a></li><li><a href="">key pouches</a></li></ul><ul data-index="3" class="item"><li><a href="">fashion sneakers </a></li><li><a href="">fashion sandals </a></li><li><a href="">slids</a></li><li><a href="">running shoes</a></li> </ul></div>
<script>const tab = document.querySelector(“.tab”);const items = document.querySelectorAll(“.item”);tab.onclick = (ev) => {[…tab.children].forEach((item) => item.classList.remove(“active”));ev.target.classList.add(“active”);items.forEach((item) => item.classList.remove(“active”));[…items].filter((item) => item.dataset.index === ev.target.dataset.index).pop().classList.add(“active”);};</script>
