基于HTML5做前后端交互 web前后端交互原理

转载

小题大作 2024-02-08 16:44:06

文章标签 基于HTML5做前后端交互 html javascript JSON 数据 文章分类 HTML5 移动开发

现代生活下,使用浏览器访问网站是必不可少的事情,当我们在浏览器输入一个网址,等待一会就会看到该网站的内容,那么在这个等待的过程中发生了什么,前后端是如何进行交互的?下面将以一个简单登录的页面详细为大家解释一下前后端交互的过程

前端和后端

浏览器显示的网页即为web前端界面，提供用户与网站进行交互的可视化接口，而web后端服务主要指在服务器中执行的逻辑运算和数据处理，它为前端提供着访问服务。所谓的前后端只是从代码被执行的位置来区分的，前端代码在用户面前被执行，后端代码在遥远的服务器上被执行。但是，无论前端或后端代码，都是存放在服务器上的，只是当浏览器请求的时候，从服务器发送过去而已。

基于HTML5做前后端交互 web前后端交互原理_数据

前后端简单登录页面实现流程

前端通过事件获取到用户输入的内容
事件里面获取用户输入的用户名和密码
表单验证(本文没做验证)
发送请求
后端接受前端传来的数据
后端操作数据,查询或修改数据库
后端响应结果发给前端
前端接收后端响应的结果并做处理
前端根据处理结果渲染页面

如何发送一个请求?

相信大家看了流程之后感觉1,2,3都好理解,那么前端究竟是如何发送一个请求的,又是如何知道是登录成功还是登录失败,我们就不得不先了解两个知识点 Ajax 和 JSON

Ajax介绍

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前jQuery库提供多个与AJAX相关的方法。通过 jQuery AJAX方法，能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON，同时能够把这些外部数据直接载入网页被选元素中。
在原生JS中如何发送一个Ajax请求?

// 1. 创建一个 ajax 对象
    //    这个对象就能帮我们发送一个 ajax 请求
    var xhr = new XMLHttpRequest()

    // 2. 配置请求信息(这里有的请求方式有GET 和 POST两种,这里以GET请求为例)
    //    以 GET 的请求方式 向 ajax.php 文件发起一个请求
    xhr.open('GET', './ajax.php')

    // 3. 发送请求
    xhr.send()

    // 4. 接受响应
    xhr.onload = function () {
      // 这个函数会在当前这个 ajax 请求完成的时候触发
      // 这个 ajax 请求一完成, 那么就会触发这个函数了
      // 我们再这里就能得到后端给返回的数据
      console.log('请求已经完成了')
      console.log(xhr)
    }

JSON介绍

对于交互的数据格式，采用JSON(JavaScript Object Notation)，它是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。JSON键值的层次结构简洁清晰，易于阅读和编写，使得 JSON 成为理想的数据交换语言。JSON数据格式如下：

{//JSON键/值对
"key1":"value1",
"key2":"value2",
"key3":"value3"
}

前端登录代码实现

html 代码如下

<body>
  <div class="login-wrap">
  <h1> 登 录 </h1>
  <form class="login">
    <!-- span 作为登录失败的时候显示-->
    <span>用户名或密码错误</span>
    <input type="text" class="username" placeholder="请输入用户名">
    <input type="password" class="password" placeholder="请输入密码">
    <button>登 录</button>
  </form>
  </div>
</body>

JavaScript (jQuery) 代码如下(发送一个 POST 请求)

$(function(){
            $(".login>button").click(function(e){
                e.preventDefault();
                $.ajax({
                    url:"./login.php",
                    type:"POST",
                    data:{
                        username:$(".username").val(),
                        password:$(".password").val()
                    },
                    // json 格式的数据类型
                    dataType:"json",
                }).then(function(res){
                    //接受并解析后台返回的数据
                    console.log(res);
                })
            })
        })

前端界面如下

基于HTML5做前后端交互 web前后端交互原理_基于HTML5做前后端交互_02

后端代码实现(PHP)

<?php
  // 1. 接受前端传递来的参数
  //    因为是 POST 请求, 就在 $_POST 里面获取
  $uname = $_POST['username'];
  $upass = $_POST['password'];

  // 2. 去数据库里面查询有没有这个数据了
  // 2-1. 连接数据库
  $link = mysqli_connect('localhost', 'root', 'root', 'test2');

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

  // 2-3. 解析结果
  //      因为是查询, 所以要解析结果
  $row = mysqli_fetch_assoc($res);

  // 2-4. 断开数据库连接
  mysqli_close($link);

  // 3. 根据有没有数据给前端返回结果
  // 如果成功, 我返回一个关联型数组
  // 如果失败, 我也返回一个关联型数组
  if ($row) {
    $arr = array("message" => "登录成功", "code" => 1);
  } else {
    $arr = array("message" => "登录失败", "code" => 0);
  }

  // 把这关联型数组返回
  print_r(json_encode($arr));

?>