练习

最新推荐文章于 2024-12-31 12:59:04 发布

lucasmaluping

最新推荐文章于 2024-12-31 12:59:04 发布

阅读量297

点赞数

CC 4.0 BY-SA版权

分类专栏： Java之MVC

本文链接：https://blog.youkuaiyun.com/lucasmaluping/article/details/100693374

Java之MVC 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Thymeleaf模板引擎创建登录页面，并通过JavaScript实现表单提交处理。详细展示了HTML结构、Thymeleaf标签及JavaScript代码，用于动态绑定和提交处理。

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

第一步：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>

    <form id="newForm">
        <button type="submit" id="btn_login" >登录</button>
    </form>

    <th:block th:replace="common/include"></th:block>

    <th:block th:replace="js/login_js2"></th:block>
</body>
</html>

第二步：

<script>
    var Login = function() {
        return{
            init: function () {
                //找到ewForm,id选择器
                $('#' + 'newForm')
                    .submit(function () {
                        submitHandler()
                    })
            },
            //提交参数
            submitParam: {
                "initForm": function () {
                    return true;
                },
                "btnSubmitingVal": "登录中...",
                "btnVal":"登录",
                "btnId": "btnLogin",
                //"ajaxType":"post";
                "ajaxUrl": "/login.json",
                //"formId" : "newForm",
                //"successTip":"操作成功！",
                "successCallback": function (resp) {

                    if (!resp.success) {
                        $("#spanErrMsg").html(resp.resultMsg);
                        return;
                    }

                    location.href = "/index.html";

                }
            }
        }
    }

    /**
     * 当页面加载成功的时候后执行
     */
    $(document).ready(function () {
        Login.init();
    })

</script>