PHP与Ajax交互-【官方】百战程序员_IT在线教育培训机构


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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
        账号：<input type="text" name="username" id="username" value="">
        <br>
        密码：<input type="text" name="password" id="password" value="">
        <br>
        <input type="submit" value="提交" id="login">
    <script>
        $("#login").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();
            $.ajax({
                type: 'get',
                url: "http://localhost/php_serve/php19/index.php",
                data: {
                    username: username,
                    password: password
                },
                success: function (res) {
                    console.log(JSON.parse(res));
                }
            });
        })
    </script>
</body>
</html>


xxxxxxxxxx
$username = $_GET['username'];
$password = $_GET['password'];
$con=mysqli_connect('localhost','root','','itbaizhan');
if($con){
    mysqli_query($con,'set names utf8');
    $sql="select * from user where username='$username' and password='$password'";
    $result=mysqli_query($con,$sql);
    if($result -> num_rows >0 ){
        $data = mysqli_fetch_all($result,MYSQLI_ASSOC);
        echo json_encode($data);
    }else{
        echo json_encode((array("msg"=>"暂无数据")));
    }
}else{
    echo json_encode((array("msg"=>"链接失败")));
}

实时效果反馈

1. 利用Ajax实现前后端交互的特点是：

A 前后端代码嵌套在一起

B 前后端代码完全分离，方便后期维护

C Ajax代码需要嵌套在PHP代码中

D PHP代码需要嵌套在HTML代码中

答案

1=>B

实操

【简答】描述前后端交互的方式，前后端分离的优势
【实操】完成PHP与MySQL的增删改查
【实操】实现从前端到服务器到数据库的交互操作

PHP+MySQL完成前后端交互 AJAX基础

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