1. 实例演示Ajax的get,post请求; 2. 练习选顶卡和换肤案例

16lz 2021-04-22

1. Ajax的get请求

xhr 请求4步骤

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

创建test1.php文本
<?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]);

配置:输入请求的脚本和查询条件代替url
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>

<p></p>

<script>
const btn = document.querySelector(“button);
btn.onclick = () => {
const xhr = new XMLHttpRequest();
xhr.open(type,”test1.php?id=2”);
}
</script>
### 2. Ajax的get请求
- 创建一个表单，selector
<style>
body {
background-color: pink;
}
.login {
width: 20em;
padding: 0 1em 1em;
background-color: tan;
margin: 2em auto;
display: grid;
place-items: center;
}

.login form {
display: grid;
grid-template-columns: 3em 1fr;
gap: 1em 0;
}

.login form input {
border: none;
outline: none;
}

.login form input:focus,
.login form input:hover {
box.shadow: 0 0 5px lime;
}

.login form button {
background-color: lightgray;
color: white;
outline: none;
border: none;
height: 2em;
}

.login form button:hover {
background-color: darkgray;
cursor: pointer;
box-shadow: 0 0 5px lime;
}

.login form button,
.tips {
grid-area: auto / 2;
}
</style>
</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>

- 编辑样式style
<style>
* {
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;
}
</style>

- 导航切换

<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>

更多相关文章

随机推荐