微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > Ajax技术基础知识
博主信息
博文 32
粉丝 0
评论 0
访问量 35328
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Ajax技术基础知识
Yang_Sir
原创
1054人浏览过
  • Ajax技术用于前后端数据交互，异步请求，局部刷新页面，增强了前端用户的体验，也能减少服务器的负担。

1. 什么是Ajax

  • Ajax是web端的开发技术，用js在浏览器中向服务器发送数据，并获取服务器响应的数据的技术。
  • 使用Ajax可以进行异步请求，局部刷新页面
  1. //创建Ajax请求对象
  2. var ajax = new XMLHttpRequest();
  3. //监听请求回调
  4. ajax.onreadystatechange = function () {
  5.         if (ajax.readyState === 4 && ajax.status === 200) {
  6.           alert(ajax.responseText);
  7.         }
  8.       }; 
  9. //初始化请求参数
  10. ajax.open("GET", "homework1.php?name=taier&pwd=123456", true);
  11. //发起请求
  12. ajax.send();

2. Ajax的几种请求方式

  • Ajax请求与HTML请求一样有GET和POST请求两种类型
  • POST请求有三种数据传输的方式，模拟表单、json字符串和formData

2.1 html页面

  • 创建4个按钮，onclick属性设置分别调用不同方法，发起不同类型的请求
  • GET请求直接在请求路径中附加参数
  • POST请求通过setRequestHeader方法设置请求头
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax请求</title>
  7.   </head>
  8.   <body>
  9.     <button class="get" onclick="getRequest(ajax);">GET请求</button>
  10.     <button class="post" onclick="postRequest(ajax);">模拟表单POST请求</button>
  11.     <button class="post" onclick="postRequest1(ajax);">
  12.       json字符串POST请求
  13.     </button>
  14.     <button class="post" onclick="postRequest2(ajax);">
  15.       FormData数据POST请求
  16.     </button>
  17.     <script>
  18.       //创建Ajax请求对象
  19.       var ajax = new XMLHttpRequest();
  20.       //监听请求回调
  21.       ajax.onreadystatechange = function () {
  22.         if (ajax.readyState === 4 && ajax.status === 200) {
  23.           alert(ajax.responseText);
  24.         }
  25.       };
  27.       //初始化请求参数open(请求类型，请求地址，是否异步)
  28.       //get请求
  29.       function getRequest(ajax) {
  30.         ajax.open("GET", "homework1.php?name=taier&pwd=123456", true);
  31.         ajax.send();
  32.       }
  34.       //post请求，
  35.       function postRequest(ajax) {
  36.         ajax.open("POST", "homework1.php", true);
  37.         //设置请求头，模拟表单方式发送数据
  38.         ajax.setRequestHeader(
  39.           "content-type",
  40.           "application/x-www-form-urlencoded"
  41.         );
  42.         var user = { name: "taier", pwd: "789123" };
  43.         var data = JSON.stringify(user); //转换为json字符串
  44.         ajax.send(data);
  45.       }
  47.       function postRequest1(ajax) {
  48.         ajax.open("POST", "homework1.php", true);
  49.         //设置请求头，json方式发送数据,php端以`php://input`流文件方式接收
  50.         ajax.setRequestHeader("content-type", "application/json;charset=utf-8");
  51.         var user = { name: "taisan", pwd: "00000" };
  52.         var data = JSON.stringify(user); //转换为json字符串
  53.         ajax.send(data);
  54.       }
  56.       function postRequest2(ajax) {
  57.         ajax.open("POST", "homework1.php", true);
  58.         //FormData方式发送数据
  59.         var data = new FormData();
  60.         // 添加数据 -->
  61.         data.append("name", "taisi");
  62.         data.append("pwd", "253512");
  63.         ajax.send(data);
  64.       }
  65.       //
  66.     </script>
  67.   </body>
  68. </html>

2.2 PHP页面

  • 各个类型发起的请求，参数获取方式也不一样
  1. <?php
  2. if(!empty($_GET)){
  3.     //获取get请求的参数
  4.     echo json_encode($_GET);
  6. }elseif(!empty($_POST)){
  8.     //以模拟表单和formData方式发送的可以用$_POST接收到
  9.     //模拟表单发送的数据在$_POST数组的一个键中
  10.     //formData方式发送的在$_POST数组中是键值对
  12.     echo json_encode($_POST);
  13. }else{
  15.     //php://input 接收到的直接是字符串
  16.     $data = file_get_contents('php://input');
  17.     //$data = json_decode($data);
  18.     echo json_encode($data);
  19. }

效果图

get请求发送的参数在$_GET数组中可以获取

POST模拟表单请求发送的参数在$_POST数组的一个键中

JSON字符串方式发送的通过php://input流文件的方式获取

formData发送的参数在$_POST数组中直接获取

3. 使用Ajax实现登录表单验证

3.1 前端登录页面

login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>登录</title>
  7.     <link rel="stylesheet" type="text/css" href="login.css" />
  8.   </head>
  9.   <body>
  10.     <form onsubmit="return false" class="form">
  11.       <section>
  12.         <label for="username">账号：</label
  13.         ><input type="text" name="username" id="username" required/>
  14.       </section>
  15.       <section>
  16.         <label for="password">密码：</label
  17.         ><input type="password" name="password" id="password" required/>
  18.       </section>
  19.       <section>
  20.         <span id="res"></span>
  21.       </section>
  22.       <section>
  23.         <button onclick="login();">登录</button>
  24.         <span>没有账号？点击<a href="">注册</a>
  25.       </section>
  26.     </form>
  27.     <script>
  28.         function login(){
  29.             var ajax = new XMLHttpRequest();
  30.             //监听请求回调
  31.             ajax.onreadystatechange = function () {
  32.                 if (ajax.readyState === 4 && ajax.status === 200) {
  33.                   $data = JSON.parse(ajax.responseText);
  34.                   //把服务器返回的结果写入到span标签中
  35.                   document.getElementById('res').innerHTML=$data.msg;
  36.                 }
  37.             };
  38.             ajax.open("POST", "login.php", true);
  39.             //FormData方式发送数据
  40.             var data = new FormData();
  41.             //获取input标签中输入的数据
  42.             var username = document.getElementsByName("username")[0].value;
  43.             var password = document.getElementsByName("password")[0].value;
  44.             //判断是否有输入用户名和密码
  45.             if(username===''||password===''){
  46.               document.getElementById('res').innerHTML='请输入用户名和密码';
  47.               return false;
  48.             }
  49.             console.log(username,password);
  50.             //添加到formData中
  51.             data.append("username",username);
  52.             data.append("password",password);
  53.             ajax.send(data);
  54.         }
  55.     </script>
  56.   </body>
  57. </html>

页面样式文件：login.css

  1. body {
  2.   display: grid;
  3.   justify-content: center;
  4.   align-items: center;
  5.   background-image: url("bg1.jpg");
  6.   background-size: 100vw 100vh;
  7. }
  8. .form {
  9.   margin-top: 220px;
  10.   width: 500px;
  11.   height: 300px;
  12.   background-color: #d7e6f1;
  13.   border-radius: 5%;
  14.   display: flex;
  15.   flex-flow: column nowrap;
  16.   justify-content: space-around;
  17. }
  18. section {
  19.   padding: 0 30px;
  20.   display: flex;
  21.   align-items: center;
  22.   justify-content: center;
  23. }
  24. section > input {
  25.   height: 30px;
  26.   flex-grow: 1;
  27.   font-size: 1.3em;
  28. }
  29. section > label,
  30. button {
  31.   width: 80px;
  32.   font-size: 1.3em;
  33.   /* flex-grow: 3; */
  34. }
  35. .form > :last-of-type {
  36.   margin-left: 30px;
  37.   display: flex;
  38.   align-items: center;
  39.   justify-content: space-evenly;
  40. }
  41. #res {
  42.   color: red;
  43. }

3.2 后端服务器文件：login.php

  1. <?php
  3. $data=[];
  4. if(isset($_POST['username'])){
  6.     //把用户名和密码放到data数组中
  7.     $data[] = $_POST['username'];
  8.     $data[] = $_POST['password'];
  9.     //使用？占位符
  10.     $sql = "select count(*) from user where `username`=? and `password`=?";
  12.     $config = require('../database.php');//获取数据库配置参数
  14.     $pdo = new PDO($config['dsn'],$config['username'],$config['password']);
  15.     $stmt = $pdo->prepare($sql);//预处理
  16.     $stmt->execute($data);
  17.     $res = $stmt->fetch(PDO::FETCH_NUM);//获取索引数组结果集
  18.     //根据查询结果返回数据
  19.     if($res[0]==1){
  20.     //---显示返回结果，没有做跳转
  21.         echo json_encode(['code'=>1,'msg'=>'登录成功']);
  22.     }else{
  23.         echo json_encode(['code'=>0,'msg'=>'用户名或密码错误']);
  24.     }
  26. }else{
  27.     echo json_encode(['code'=>404,'msg'=>'系统错误']);
  28. }

3.3 演示效果图



批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：前端不死, 异步永生, 好好学
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录