接收表单中的用户名和密码，如果用户名和密码分别为"admin"和"123456",则返回登录成功页面，否则返回登录失败页面。已知登录面如下；

<form action="http://localhost:80/login.do" method="post">
    <label>用户名</label></label><input type="text" name="userName"/><br/>
	<label>密码</label></label><input type="password" name="password"/><br/>
	<input type="submit" value="登录"/>
</form>

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $(function() {
            $("#btn").click(function () {
                if($("#userName").val()=="admin" && $("#password").val()=="123456" ){
                    //如果用户名和密码都正确，跳转到“登陆成功！”页面，提交表单请求
                    $(".operate").attr("action","http://localhost:8080/succeed.html");
                }else{
                    //否则跳转到“登录失败”页面
                    $(".operate").attr("action","http://localhost:8080/fail.html");
                }
            });
        });
    </script>
</head>
<body>
    <form class="operate" action="http://localhost:8080/succeed.html" method="post">
        <label>用户名</label></label><input type="text" id="userName"/><br/>
        <label>密码</label></label><input type="password" id="password"/><br/>
        <input type="submit" id="btn" value="登录"/>
    </form>
</body>
</html>

succed.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    登陆成功！
</body>
</html>

fail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    登陆失败！
</body>
</html>

运行效果：

 

 

 

 

# 前端 # jquery # html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

小窗口大魔力，实况窗服务实时掌控重要信息变化

avatar 华为云开发者联盟
cover

GeminiDB全面联动MySQL：热点数据，一键加速

avatar 华为云开发者联盟
cover

基于Python和TensorFlow实现BERT模型应用

avatar 华为云开发者联盟