AJXA-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42039952/article/details/115499193

该博客演示了如何使用AJAX进行用户登录的前端实现。通过jQuery库，当用户点击登录按钮时，AJAX发送POST请求到服务器，传递用户名和密码。在后台响应成功后，根据返回的响应数据判断登录状态，弹出相应的提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        用户名:<input type="text" id="username"/><br/>
        密码:<input type="password" id="password"/><br/>
    </form>
    <button>登录</button>
</body>
<!--http://localhost:63342/j242maven/src/main/webapp/request/ajax_login.html-->
<!--相对路径和绝对路径-->
<script src="../jquery/jquery-3.5.1.js"></script>
<script>
    $(function () {
        $("button").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();
            console.log("username=" + username + "  password=" + password);
            $.ajax({
                url:"/login",   // 请求路径
                type:"post",            // 请求的方式，不区分大小写
                // datatype:"json",
                // request中传递的key-value值
                data:{
                    username:username,
                    password:password
                },
                success:function(response){                        // 后台服务响应成功，自动返回数据
                    console.log("响应成功数据: " + response);      // 这里的response不是我们的java的response，只是java返回的文本数据而已
                    // JSON.stringify();                           // 把一个合法的json对象转换成一个json字符串
                    var json = JSON.parse(response);               // 把一个合法的json字符串转换成一个json对象
                    console.log("响应成功数据: " + response.code);
                    if(response.code === 200) {
                        alert("登录成功!");
                    }
                    else {
                        alert("登录失败，请稍后重试!");
                    }
                },
                error:function(response){             // 网络请求失败，自动调用此方法
                    console.log("出错" + response);
                }
            });
        });
    });
</script>
</html>