学习笔记之springBoot小工程（二）（登录页面js）

最新推荐文章于 2024-05-12 18:33:36 发布

Glace.♥

最新推荐文章于 2024-05-12 18:33:36 发布

阅读量107

点赞数 1

文章标签：学习笔记 spring boot

本文链接：https://blog.csdn.net/LULU_lulu666/article/details/101033296

版权

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- 规范代码格式xmlns，以便下面使用th-->
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
   <script src="/vendor/sweetalert/dist/sweetalert.min.js"></script>
   <link rel="stylesheet" type="text/css" href="/vendor/sweetalert/dist/sweetalert.css">
    <!--   引入外部文件-->
</head>
<body style="text-align: center">
    <form id="newForm" onsubmit="return false">
        <div>
            <input id="loginName" type="text" name="loginName" />
        </div>
        <div>
            <input id="loginPassword" type="password" name="password"/>
        </div>

        <button type="submit" id="btn_login">登录</button>
<!--        id是这个button唯一标识-->
    </form>
    <th:block th:replace="/js/login_js3"/>
</body>
</html>

login_js3.html

<script type="text/javascript">
var Login = function () {
    return{
        init:function () {
         Login.initSubmit();
         // alert("honey")
        },
        initSubmit: function () {
             // alert("........aaaaaaa")
            var defaultParam = {
                formId:"newForm"
            }
            var param = $.extend({},defaultParam)
            $('#'+defaultParam.formId).submit(function () {
                Login.getLoginData(defaultParam);
            })
        },

        getLoginData: function (curParam) {
            // alert("......bbb")
                    // var a = {};
                    // //取出数组 所有元素
                     var b = $('#'+curParam.formId).serializeObject();
                    // alert(b[0].name+"......"+b[0].value);
                    // //遍历集合
                    // $.each(b,function () {
                    //     a[this.name]=this.value;
                    //     // this代表当前循环的object，第一次是[username:ddd],第二次是[userpassword:111]
                    // });
                   // alert(JSON.stringify(a));
                    Login.sendDataToController(b);
        },

        sendDataToController:function (param){
            alert('...sendDataToController')
            $.ajax({
                url:"/login.json",
                contentType:"application/json;charset=UTF-8",
                type:"post",
                data:JSON.stringify(param),
                // dataType:"json",

                //回调函数success,目的：得到反馈；定义：自己定义的
                success:function (resp) {
                   

                        alert(".......提交成功"+JSON.stringify(resp))
                         
                    }
                }
            })
        }

    }
}();
$(document).ready(function () {
    Login.init();
})
</script>

Glace.♥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
学习笔记之springBoot小工程（二）（登录页面js）

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

扫一扫