前后端交互 B/S

最新推荐文章于 2021-12-17 16:36:53 发布

@碧水流沙

最新推荐文章于 2021-12-17 16:36:53 发布

阅读量881

点赞数 1

文章标签： ajax mysql javascript php html5

本文链接：https://blog.csdn.net/weixin_43861707/article/details/104460685

版权

B/S架构

先来了解B/S架构
B/S架构中的B 是Browser(浏览器) S是Server(服务器)
B/S架构由C/S架构改进而成可以说是三层C/S架构

第一层是浏览器，也就是客户端，用户不需要特别安装就可以进行操作，主要进行完成用户所需的和后端的输入输出功能，处理较少的事务逻辑。

第二层是WEB服务器，也就是服务器，主要完成客户端所需的应用逻辑，并向数据库发送数据。

第三层是数据库服务器，也就是数据库，存储的大量的数据。当数据库服务器收到了WEB服务器的请求后，会对SQL语句进行处理，并将返回的结果发送给WEB服务器，接下来，WEB服务器将收到的数据结果转换为HTML文本形式发送给浏览器，也就是我们打开浏览器看到的界面。
在这里插入图片描述

前后端交互

了解了B/S架构我们可以通过其原理来进行前后端的交互。
使用的工具：
浏览器:Chrome
服务器:Apache
数据库:MySQL
（直接安装phpstudy集成环境即可）

编程语言：
前端使用 JavaScript html5
后端使用PHP

form表单

我们先从form表单提交说起

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>登录 页</h1>

<!--
    form 标签的属性
      -> action 表示你要提交的 php 文件
      -> method(方式, 方法) 表示你以什么方式发送请求
        => GET 或者 POST
        => 不写 默认是 GET
        => 大小写无所谓
  -->
  <form action="./login.php">
    用户名: <input type="text" name="username"><br>
    密码: <input type="text" name="password"><br>
    <button>登录</button>
  </form>

</body>
</html>

以上是一个简单的登录功能的前端代码，当用户点击登录按钮的时候, 把用户输入的用户名和密码带到后端
后端接受参数, 并且去数据库里面验证一下有没有这个数据。

下面我们来看后端PHP代码

<?php
  // 解决中文乱码
  header('content-type: text/html;charset=utf-8;');

  // 获取前端传递来的数据
  $uname = $_GET['username'];
  $upass = $_GET['password'];
  
  // 使用前端传递过来的数据在数据库中进行 对比
  // 连接数据库
  $link = mysqli_connect('localhost', 'root', 'root', 'test2');

  //执行 sql 语句
  $sql = "SELECT * FROM `login` WHERE `username`='$uname' AND `password`='$upass'";
  $res = mysqli_query($link, $sql);

  // 解析结果
  $row = mysqli_fetch_assoc($res);

  // 断开数据库连接
  mysqli_close($link);

  // 根据解析的结果进行判断 执行
  if ($row) {
    //条件成立时 跳转到购物车页面
    header('location: ./cart.html');
  } else {
   //不成立证明 没有在数据库中查询到用户名和相匹配的密码 
    echo '用户名或密码错误!';
  }
?>

我们通过浏览器的form表单提交数据（username，password）给服务器，服务器在接收到数据后连接数据库，之后在数据库中查找对应的数据（username,password），并将结果传回服务器。服务器根据结果，执行对应操作，最终反应在浏览器上。

上面是 form表单 GET方式的提交我们还可以用POST方式提交
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>登录 页</h1>
  
  <form action="./login.php" method="POST">
    用户名: <input type="text" name="username"><br>
    密码: <input type="text" name="password"><br>
    <button>登录</button>
  </form>
</body>
</html>

PHP代码:

<?php

  /*
    接受前端传递来的参数
      + 在一个预定义变量里面接受参数
      + $_GET -> 存储的是前端以 GET 方式传递来的参数
      + $_POST -> 存储的是前端以 POST 方式传递来的参数

    因为前端是以 POST 方式发送的请求
      + 后端就在 $_POST 这个预定义变量里面获取
      + 也是一个关联型数组, 从里面获取数据

  */

  // 中文乱码
  header('content-type: text/html;charset=utf-8;');

  //  获取前端传递来的参数
  $uname = $_POST['username'];
  $upass = $_POST['password'];

  // 去数据库比对
  // 连接数据库
  $link = mysqli_connect('localhost', 'root', 'root', 'test2');

  // 执行 sql 语句
  $sql = "SELECT * FROM `login` WHERE `username`='$uname' AND `password`='$upass'";
  $res = mysqli_query($link, $sql);

  //解析结果
  $row = mysqli_fetch_assoc($res);

  // 断开和数据库的连接
  mysqli_close($link);

  // 根据数据库操作的结果进行操作
  if ($row) {
    // 跳转页面
    header('location: ./cart.html');
  } else {
    echo '用户名或密码错误!';
  }

?>

除了GET与POST方式我们还有许多方式进行请求
常见的请求方式
1. GET ，多用于向服务端获取一些数据
2. POST，多用于向服务器传递信息
3. PUT ，多用于向服务器传递信息, 并让服务器存储起来
4. DELETE，多用于让服务器删除一些信息
5. HEAD，不需要响应体, 主要是为了获取响应头信息
6. PACTH，和 PUT 类似, 倾向于局部更新
7. CONNECT，预留方式, 管道连接改成代理连接的方式
8. OPTIONS，用于允许前端查看服务端性能(服务端同意)

GET 和 POST 请求的区别 ?

    GET
      1. 倾向于向服务器获取数据
      2. 直接再地址后面进行拼接(请求体是空的)
      3. 大小限制为 2KB 左右(因为 IE 最多传递 2KB)
      4. 会被浏览器主动缓存
      5. 相对于 POST 不是很安全(明文发送)
      6. 数据格式必须是 url 编码的格式, 如果不是会自动转换成 url 编码
    POST
      1. 倾向于向服务器传递数据
      2. 再请求体里面传递过去(地址后面没有)
      3. 理论上是没有限制(但是可以被服务器限制)
      4. 不会被浏览器主动缓存, 需要手动设置
      5. 相对于 GET 比较安全的(暗文发送)
      6. 数据格式理论上无所谓, 但是要和请求头中的 content-type 一致
       请求头里面的 content-type 表示请求体的数据格式

Ajax

什么是Ajax呢？
Ajax ：Asynchronous JavaScript and XML
Ajax是一种通过Js 来和后端交互的方法，与form表单不同。
form表单提交的方式，是在浏览器地址栏输入某些内容, 显示一个页面。在浏览器地址栏输入一个后端地址, 后端处理业务后将内容返回给浏览器。
Ajax是通过JS请求后端地址，后端返回的内容不会直接显示在JS浏览器上，而是将返回的内容给JS，我们可以通过JS渲染将内容显示在页面上。
下面我们通过JS发送一个Ajax请求

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script>
   
    //  1 创建一个 ajax 对象
    var xhr = new XMLHttpRequest()

    // 2 配置一下本次请求的信息
    //   默认是一个异步的请求
    //  本次请求携带了三个参数, a 和 b 和 c
    xhr.open('GET', ''./get.php?a=100&b=200&c=300'')
    
	// 3 发送这个请求
    xhr.send()
    
     // 4 接受响应
    xhr.onload = function () {
      // 会在 ajax 结束的时候触发
      console.log(xhr.responseText)
    }
  </script>
</body>
</html>

<?php

  // 接受前端传递来的参数
  //    接受 GET 方式发来的参数
  //    使用 php 里面的一个预定义变量叫做 $_GET
  //    所有 GET 方式带来的参数都在这个 关联型数组里面存放
  $a = $_GET['a'];
  $b = $_GET['b'];
  $c = $_GET['c'];

  echo "a的值:$a b的值:$b c的值:$c";

?>

效果：
在这里插入图片描述
我们先通过XMLHttpRequest构造函数创建一个Ajax对象xhr。之后通过open()配置请求信息可以设置请求方式 GET POST 等，设置请求地址并且可以在地址后连接参数传递给后端。之后我们使用send()发送请求。最后通过onload接受响应并在ajax结束时在日志输出响应主体被返回的文本responseText。

当我们使用POST请求时：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script>
 
    /*
        + POST 请求携带参数
        + 在 send 后面的括号里面书写
          -> 一个参数就是 key=value
          -> 多个参数就是 key=value&key1=value1&key2=value2
          -> **在发送请求之前设置一下请求头, 不然后端接受不到**
          -> xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    */

    // 1 创建 ajax 对象
    var xhr = new XMLHttpRequest()

    // 2 配置请求信息
    xhr.open('POST', './server/post.php')

    // 3 接受响应
    xhr.onload = function () {
      console.log(xhr.responseText)
    }

    //  发送请求之前, 设置一下请求头
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

    // 4. 发送请求
    xhr.send('test1=123&test2=456&test3=789') // 携带了两个参数, d 和 e
    
  </script>
</body>
</html>

PHP:

<?php
    //接收post 发来的参数

    $test1=$_POST['test1'];
    $test2=$_POST['test2'];
    $test3=$_POST['test3'];

    //打印传递的参数
    echo "test1的值:$test1 test2的值:$test2 test3的值:$test3";
?>

结果：
在这里插入图片描述
POST请求方式与GET不同的是我们在发送请求之前设置请求头，并且传递参数通过send()方法携带。

我们可以将GET POST的Ajax方法进行封装方便之后使用。

ajax.js:

function getSend(url,cb) {
    //callBack为传递进来的函数
    //响应成功调用callBack

    //创建ajax对象
    var xhr=new XMLHttpRequest();

    //配置请求信息 方法为GET url是地址参数直接传递过来
    xhr.open('GET',url);

    //接受响应
    xhr.onload=function () {
        // console.log(xhr.responseText);

        cb(xhr.responseText);
    };
    //发送请求
    xhr.send();
}

function postSend(url,cb,data) {
    //data post请求传递给后端的数据
    //创建ajax对象
    var xhr=new XMLHttpRequest();
    //配置请求信息 方法为POST url是地址参数直接传递过来
    xhr.open('POST',url);

    //接受响应
    xhr.onload=function () {
        //回调函数cb 将结果返回出去
        cb(xhr.responseText);
    };
    //设置请求头
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

    //发送数据 data
    xhr.send(data);
}

通过以上的内容，我们可以使用Ajax来进行B/S架构的实现
我们同样写一个登录案例来演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
   span{
            color: red;
            display: none;
        }
  </style>
</head>
<body>
   <h1>登录界面</h1>
    <form>
        <span>用户名或密码错误</span>
        用户名：<input type="text" class="username"><br>
        密码：<input type="text" class="password"><br>
        <button>登录</button>
    </form>

  <script src="../ajax.js"></script>
  <script>
    

    // 获取元素
    var nameI=document.querySelector('.username');
    var passI=document.querySelector('.password');
    var eSpan=document.querySelector('span');

    // 绑定事件
    var form = document.querySelector('form')
    // 绑定表单提交事件
    form.onsubmit = function (e) {
      e = e || window.event
      e.preventDefault()

      // 获取用户输入的内容
      var uname=nameI.value;
      var upass=passI.value;

      // 3. 表单验证
      // 非空验证
      if (!uname || !upass) {
        alert('请完整填写表单')
        
        return
      }

      //发送一个带有参数的 POST 请求 使用我们封装好的postSend方法
      postSend('./login.php', function (res) {
        // 这个函数 请求成功的时候调用
        var result = JSON.parse(res)
        //返回jJSON字符串中code 等于0执行
        if (result.code === 0) {
        //span标签显示 报错
          eSpan.style.display = 'block'
        } else {
        //跳转到购物车界面
          window.location.href = './cart.html'
        }

      }, `username=${uname}&password=${upass}`)
    }
</script>
</body>
</html>

html页面：
在这里插入图片描述
PHP代码：

<?php
	//接受前端传递来的参数
    $uname=$_POST['username'];
    $upass=$_POST['password'];

	// 在数据库查询数据
    // 连接数据库
    $link=mysqli_connect('localhost','root','root','newdata');
	//执行 sql 语句
    $sql="SELECT * FROM `login` WHERE `username`='$uname' AND `password`='$upass'";
    $res=mysqli_query($link,$sql);
    //解析结果
    $row=mysqli_fetch_assoc($res);
	//断开连接
    mysqli_close($link);

	//根据结果返回关联型数组 
    if($row){
        $arr=array("message"=>"成功","code"=>1);
    }else{
        $arr=array("message"=>"失败","code"=>0);
    }

	//将关联型数组转换为JSON字符串返回
    print_r(json_encode($arr));

?>

@碧水流沙

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前后端交互 B/S

B/S架构先来了解B/S架构B/S架构中的B 是Browser(浏览器) S是Server(服务器)B/S架构由C/S架构改进而成可以说是三层C/S架构第一层是浏览器，也就是客户端，用户不需要特别安装就可以进行操作，主要进行完成用户所需的和后端的输入输出功能，处理较少的事务逻辑。第二层是WEB服务器，也就是服务器，主要完成客户端所需的应用逻辑，并向数据库发送数据。第三层是数据库...
复制链接

扫一扫