Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS：Ajax的请求（我倒在最后访问数据库上）
Blogger Information
Blog 39
fans 0
comment 0
visits 30663
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
JS：Ajax的请求（我倒在最后访问数据库上）
楷
Original
770 people have browsed it

1.Ajax的请求流程—GET

  1.     <script>
  2.         // 1.创建Ajax对象
  3.         var xhr = new XMLHttpRequest();
  4.         // 2.监听请求
  5.         xhr.onreadystatechange = function(){
  6.             if (xhr.readyState === 4 && xhr.status === 200){
  7.                 console.log(xhr.responseText);
  8.             }
  9.         }  
  10.         // 3.初始化请求参数
  11.         xhr.open('GET', 'test1.php', true);
  12.         // 4.发送请求
  13.         xhr.send(null);
  14.     </script>

效果演示

2.Ajax POST请求一

  1.     <script>
  2.         // 1.创建Ajax对象
  3.         var xhr = new XMLHttpRequest();
  4.         // 2.监听请求
  5.         xhr.onreadystatechange = function(){
  6.             if(xhr.readyState === 4 && xhr.status === 200){
  7.                 console.log(xhr.responseText);
  8.             }
  9.         };
  10.         // 3.初次化请求参数
  11.         xhr.open("POST","test2.php",true);
  12.         // 4.设置请求头，模拟表单方式进行发送
  13.         xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
  14.         // 设置表单发送JS对象
  15.         var user = {
  16.             email:"admin@php.cn",
  17.             password:"654321",
  18.         };
  19.         // 把JS对象转化为json字符串
  20.         var data = JSON.stringify(user);
  21.         // 5.发送请求
  22.            xhr.send(data);
  23.     </script>

效果演示

2.Ajax POST请求二

  1.     <script>
  2.         // 1.创建Ajax对象
  3.         var xhr = new XMLHttpRequest();
  5.         // 2.监听请求
  6.         xhr.onreadystatechange = function(){
  7.             if(xhr.readyState === 4 && xhr.status === 200 ){
  8.                 console.log(xhr.responseText);
  9.             }
  10.         };
  11.         // 3.初始化请求参数
  12.         xhr.open("POST","test4.php",true);
  14.         // 4.设置请求头
  15.         xhr.setRequestHeader("content-type","application/json,charset=utf-8");
  16.         // 设置表单发送JS对象
  17.         var user = {
  18.             email:"admin@php.cn",
  19.             password:"654321",
  20.         };
  21.         // 把JS对象转化为json字符串
  22.         var data = JSON.stringify(user);
  24.         // 5.发送请求
  25.         xhr.send(data);
  26.     </script>

效果演示

3. FormData的请求

  1.     <script>
  2.         var xhr = new XMLHttpRequest();
  3.         xhr.onreadystatechange = function(){
  4.             if(xhr.readyState === 4 && xhr.status === 200){
  5.             console.log(xhr.responseText);
  6.         };
  7.     };
  8.         xhr.open("POST", "test3.php", true);
  9.         var data = new FormData();
  10.         data.append("username","Peter");
  11.         data.append("password","654321");
  12.         xhr.send(data);
  13.     </script>

效果演示

4.用户登录与验证的过程（数据库）

  1. <body>
  2.     <p>请登录</p>
  3.     <form action="" method="post" style="display: grid; gap:15px;" onsubmit="return false" >
  4.         <input type="email" name="email"  placeholder="email@php.cn" required autofocus />
  5.         <input type="password" name="password"  placeholder="***" required />
  6.         <button>提交</button>
  8.     </form>
  9.     <script>
  10.         // 1.获取表单数据
  11.         var form1 = document.querySelector("form");
  12.         var but1 = document.querySelector("form button");
  13.         // console.log(form1,but1);
  15.         // 2.按钮建立onclick事件
  16.         but1.onclick = function(){
  17.             var xhr = new XMLHttpRequest();
  18.             xhr.onreadystatechange = function(){
  19.             if(xhr.readyState === 4 && xhr.status === 200){
  20.                 console.log(xhr.responseText);
  21.                 };
  22.             };
  23.             xhr.open("POST","test5.php",true);
  24.             var data = new FormData(form1);
  25.             // console.log(data);
  26.             xhr.send(data);
  27.         }
  28.     </script>

test5.php
<?php
print_r($_POST);

  1. $pdo = new PDO('mysql:host=localhost; dbname = exe05', 'exe','exE123');
  3. $stmt = $pdo->prepare("SELECT COUNT(`id`) FROM `users` WHERE `email`=?
  4. AND `password`=? LIMIT 1 ");
  6. $stmt->execute([$_POST['email'],$_POST['password']]);
  8. print_r($_POST['email']);
  9. print_r($_POST['password']);
  11. print_r($stmt);
  13. $user = $stmt->fetch(PDO::FETCH_NUM);
  14. print_r($user);
  16. if($user[0] == 1) echo json_encode(['status'=>1,'message'=>'验证通过' ]);
  17. else echo json_encode(['status'=>0,'message'=>'邮箱或者密码错']);

演示效果

总结：

  1. Ajax的请求流程与GET/POST实现步骤。注意调用对象方法时区分大小写。如xhr.readyState，我就栽在这里。另外，我开始没有启动phpstudy的Apached，一直用open with live server，提示找不到test1.php。
  2. POST请求数据的处理方式：
    方法一：前端以表单方式（键值对）发送，服务端以$_POST接收
    方法二：json数据方式发送，以PHP：//input文件流接收
  3. FormData与传统的请求头表单数据模拟区别：直接序列化表单数据，被Ajax识别，不用设置请求头。
    4.最后一条作业：用户登录与验证的过程（数据库）。
    我已做到最后一步，发现test5.php中
    $stmt->execute([$_POST[‘email’],$_POST[‘password’]])传不了参数，如截图，不知为何，查了半天，没查出原因，所以我暂时做不出最后结果。
Correcting teacher：天蓬老师天蓬老师

Correction status：unqualified

Teacher's comments：打印stmt语句对象生成的sql语句使用: PDOStatement::debugDumpParams, 你打印方式不对, 要看到最终绑定了数据的sql语句, 才可以发现问题所在, 重新写
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