1. Ajax的get请求
- 创建 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>
