前后端交互的问题有

1、数据是怎么发送到后端?

2、后端是怎么接收到前端发送过来的数据?

3、后端怎么对前端发送来的数据进行处理?

4、处理完之后又怎么写入数据库,以及给前端返回处理结果?

案例:实现简单的登陆注册的页面
前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
</head>
<body>
    
<p>账号:<input type="text" id="user"></p>
<p>密码:<input type="text" id="pass"></p>
<button id="login">登录</button>
<button id="add">注册</button>

<script src="ajax.js"></script>
<!-- 
    接口文档
method: get
url: './data/user.php'
参数:
    type = login  登录
           add    注册 
    user = 用户名
    pass = 用户密码
返回:
    {err:0,msg:'登录成功'} 
-->
<script>
var login = document.querySelector('#login');
var add = document.querySelector('#add');
var user = document.querySelector('#user');
var pass = document.querySelector('#pass');

login.onclick = function (){
    ajax({
        type: 'get',
        url: './data/user.php',
        data: {
            type: 'login',
            user: user.value,
            pass: pass.value
        },
        success: function (data){
            var json = JSON.parse(data);
            if (json.err == 0){
                alert(json.msg);
            }
        }
    });
}

add.onclick = function (){
    ajax({
        type: 'get',
        url: './data/user.php',
        data: {
            type: 'add',
            user: user.value,
            pass: pass.value
        },
        success: function (data){
            var json = JSON.parse(data);
            if (json.err == 0){
                alert(json.msg);
            }
        }
    });
}
</script>

后端:

<?php
/* 
接口文档
method: get
url: './data/user.php'
参数:
    type = login  登录
           add    注册 
    user = 用户名
    pass = 用户密码
返回:
    {err:0,msg:'登录成功'}
*/

header('Content-Type:text/html;charset=utf-8');

$type = $_GET['type'];
$user = $_GET['user'];
$pass = $_GET['pass'];

if ($type && $user && $pass) {
    //连接数据库 
    $link = mysqli_connect('localhost','root','xiaoming','userlist');
    if(!$link){
        die('连接失败:'.mysqli_connect_error());
    }
    //设置编码
    mysqli_set_charset($link,'utf8');

    //判断要登录还是要注册 
    // 执行sql语句
    - [ ]  if ($type === 'login'){
        $login_sql = "select * from user where username='$user'and password='$pass'";;
        $login_arr = mysqli_fetch_all($login_res);
        if (count($login_arr) > 0){
            echo '{"err":0,"msg":"登录成功"}';
        } else {
            echo '{"err":-3,"msg":"账号或密码错误"}';
        }
    } else if($type === 'add') {
        $select_sql = "select * from user where username='$user'";
        $select_res = mysqli_query($link,$select_sql);
        // print_r($select_res );
        // die();
        $select_arr = mysqli_fetch_all($select_res);
        
        if(count($select_arr) > 0){
            die('{"err":-1,"msg":"用户名已被占用"}');
        } else {
            $insert_sql = "insert into user (username,password) values ('$user','$pass')";
            $insert_res = mysqli_query($link,$insert_sql);
            if ($insert_res){
                echo '{"err":0,"msg":"注册成功"}';
            } else {
                echo '{"err":-2,"msg":"注册失败"}';
            }
        }
    } else {
        die('{"err":-9,"msg":"参数错误"}');
    }
    mysqli_close($link);
} else {
    echo '{"err":-9,"msg":"参数错误"}';
}
?>