李俊老师教使用Ajax，Jquery进行登录

程序员文章站 2022-07-12 20:57:09

...

Login.jsp:

<%--
  Created by IntelliJ IDEA.
  User: mumusan
  Date: 2021/7/9
  Time: 9:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>

<%--网上引入的相关cdn--%>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
    //$()  jquery里面的文档就绪函数
    $(function () {
        //实现点击登录按钮的时候就实现登录功能
        $("#btn").click(function () {
            //异步登录 post请求
            $.post(
                "login",//跳转的地址
                $("form").serialize(),//获取表单数据并作为参数传输
                function (data) {//回调函数  后台url执行成功之后再执行的逻辑 data参数表示后台传过的值
                    if(data==1){
                        //1 表示登录成功
                        alert("登录成功");
                        location.href="listpage";//登录成功之后跳转的逻辑
                    }
                    if(data==0){
                        //0 表示登录失败
                        alert("登录失败");
                    }
                }

            )
        })

    })
</script>
<body>

<%--ajax 实现form表单不需要有method action--%>
<form>

    用户名： <input type="text" name="username"><br>
    密码： <input type="password" name="password"><br>


<%--    用ajax进行登录这里需要  type=button--%>
    <input type="button" id="btn" value="登录">

</form>

</body>
</html>

上一篇： CUDA C

下一篇： webpack使用的基本配置