简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1. 实例演示Ajax的get,post请求; 2. 练习选顶卡和换肤案例
Blogger Information
Blog 52
fans 1
comment 1
visits 38627
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1. 实例演示Ajax的get,post请求; 2. 练习选顶卡和换肤案例
小丑0o鱼
Original
509 people have browsed it
  2. <?php
  3. $users = [
  4. [‘id’=>1, ‘name’=>’Peter’, ‘email’=>’peter@abc.com’, ‘password’=> md5(‘123456’)],
  5. [‘id’=>2, ‘name’=>’Joe’, ‘email’=>’joe@abc.com’,’password’=> md5(‘abc123’)],
  6. [‘id’=>3, ‘name’=>’Mary’,’email’=>’mary@abc.com’,’password’ => md5(‘abc456’)],
  7. ];
  8. $id = $_GET[‘id’];
  9. $key = array_search($id,array_column($users.’id’));
  10. echo json_encode($users[$key]);

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

  2. xhr.open(type,”test1.php?id=2”);
  3. 处理 xhr 响应
  4. xhr.onload = () => {
  5. console.log(xhr.response);};
  6. xhr.onerror = () => console.log(object);
  7. 发送 xhr 请求
  8. xhr.send(null)
  9. <button>Ajax.Get request</button>
  1. <script>
  2. const btn = document.querySelector(“button);
  3. btn.onclick = () => {
  4. const xhr = new XMLHttpRequest();
  5. xhr.open(type,”test1.php?id=2”);
  6. }
  7. </script>

2. Ajax的get请求

  • 创建一个表单，selector
  2. </head>
  3. <body>
  4. <div class="login">
  5. <p>Login Name</p>
  6. <form action="" onsubmit="return false">
  7. <label for="email">email:</label>
  8. <input type="email" name="email" id="email" placeholder="demo@mail.com" />
  9. <label form="password">Password</label>
  10. <input type="password" name="password" id="password" placeholder="minimum 6 " />
  11. <button>Submit</button>
  12. <span class="tips"></span>
  13. </form>
  15. <script>
  16. const form = document.querySelector(“.login form”);
  17. const btn = document.querySelector(“.login button”);
  18. const tips = document.querySelector(“.tips”);
  20. - #### Ajax post xhr四步骤
  21. btn.onclick = (ev) => {
  22. ev.preventDefault();
  23. const xhr = new XMLHttpRequest();
  24. xhr.open(“post”, “test2.php”);
  25. xhr.onload = ( => {
  26. console.log(xhr.response);
  27. })
  28. xhr.onerrer = () => console.log(“Error”);
  29. xhr:send(new FormData(form);
  31. ### 2. 选顶卡
  32. - 导航tabs,items
  35. <div class="tabs">
  36. <ul class="tab">
  37. <li class="active" data-index="1">Handbags</li>
  38. <li data-index="2">Wallets</li>
  39. <li data-index="3">Shoes</li>
  40. </ul>
  41. <ul data-index="1" class="item active">
  42. <li><a href="">tote bags</a></li>
  43. <li><a href="">crossbody bags</a></li>
  44. <li><a href="">belt bags</a></li>
  45. <li><a href="">mens bags</a></li>
  46. </ul>
  48. <ul data-index="2" class="item">
  49. <li><a href="">clutch long wallets</a></li>
  50. <li><a href="">card holders</a></li>
  51. <li><a href="">short wallets</a></li>
  52. <li><a href="">key pouches</a></li>
  53. </ul>
  55. <ul data-index="3" class="item">
  56. <li><a href="">fashion sneakers </a></li>
  57. <li><a href="">fashion sandals </a></li>
  58. <li><a href="">slids</a></li>
  59. <li><a href="">running shoes</a></li> </ul>
  60. </div>
  2.  <script>
  3. const tab = document.querySelector(“.tab”);
  4. const items = document.querySelectorAll(“.item”);
  7. tab.onclick = (ev) => {
  9. […tab.children].forEach((item) => item.classList.remove(“active”));
  10. ev.target.classList.add(“active”);
  12. items.forEach((item) => item.classList.remove(“active”));
  14. […items]
  15. .filter((item) => item.dataset.index === ev.target.dataset.index)
  16. .pop()
  17. .classList.add(“active”);
  18. };
  19. </script>
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！