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


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

<script>
const btn = document.querySelector(“button);
btn.onclick = () => {
const xhr = new XMLHttpRequest();
xhr.open(type,”test1.php?id=2”);
}
</script>

2. Ajax的get请求

创建一个表单，selector


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

配置:输入请求的脚本和查询条件代替url

2. Ajax的get请求

相关文章