前后端交互实操-注册-【官方】百战程序员_IT在线教育培训机构


xxxxxxxxxx
$username = $_POST["username"];
$password = $_POST["password"];
$email = $_POST["email"];
$con = mysqli_connect("localhost","root","","itbaizhan");
if($con){
    mysqli_query($con,"set names utf8");
    $sql = "insert into user values (null,'$username','$password','$email')";
    $result = mysqli_query($con,$sql);
    mysqli_close($con);
    if($result){
        echo json_encode(array(
            "msg"=>"注册成功",
            "code"=>2001
        ));
    }else{
        echo json_encode(array(
            "msg"=>"注册失败",
            "code"=>4001
        ));
    }
}else{
    echo "连接数据库失败";
}

注册前端实现


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        .container{
            width: 400px;
            margin: 0 auto;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form>
            <div>
                <label for="username">用户名:</label>
                <input type="text" id="username" placeholder="用户名">
            </div>
            <div>
                <label for="password">密码:</label>
                <input type="password" id="password" placeholder="密码">
            </div>
            <div>
                <label for="password">邮箱:</label>
                <input type="email" id="email" placeholder="请输入邮箱">
            </div>
            <input type="submit" id="btn">
        </form>
    </div>
    <script>
        $("#btn").click(function(e){
            e.preventDefault();
            var username = $("#username").val();
            var password = $("#password").val();
            var email = $("#email").val();
            $.ajax({
                type:"post",
                url:"../server/register.php",
                data:{
                    username:username,
                    password:password,
                    email:email
                },
                success:function(data){
                    console.log(JSON.parse(data));
                }
            })
        })
    </script>
</body>
</html>

实操

【简答】描述前后端交互的方式，前后端分离的优势
【简单】描述什么情况下会产生跨域
【实操】实现JSONP的跨域解决方案
【实操】实现前后端交互的登录与注册功能
【实操】独立完成XHR网络请求对象的封装操作

前后端交互实操_登录 BootStrap入门

北京市昌平区回龙观镇南店村综合商业楼2楼226室