前端登录流程详解-优快云博客

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

1、 login_js.html

<script type="text/javascript">

    var Login = function(){
        return {
            init: function () {
                Login.initSubmit();
            },
            initSubmit: function () {
                var defaultParam = {
                    formId: "newForm"
                }

                // var param = $.extends({},defaultParam);
                var param = $.extend({},defaultParam);

                // debugger;
                alert("...." + defaultParam.formId)

                $('#' + defaultParam.formId).submit(function () {
                    Login.getLoginData(defaultParam);
                });
            }

            ,
            /**
             * 从form中获取数据
             */
            getLoginData: function (curParam) {

                // var info = $('#' + curParam.formId).serializeArray();
                // //info:两个Object
                // var d = {};
                // //循环
                // $.each(info, function () {
                //     d[this.name] = this.value;//this代表当前循环的object  第一次是[username:ddd]
                // })

                var info = $('#' + curParam.formId).serializeObject();

                Login.sendDataToController(info);

            },
            /**
             * 用Ajax
             * 将数据（param）发送到Controller
             * @param param ： 需要提交的数据
             */
            sendDataToController: function (param) {
                alert('......sendDataToController');
                $.ajax({
                    url:"/login.json",
                    contentType: "application/json;charset=UTF-8",
                    type: "post",
                    data: JSON.stringify(param),
                    success: function (resp) {
                        alert(".....提交成功" + resp)

                        location.href="/index.html"
                    }
                });
            }
        }
    }();


    /**
     * 页面加载完成后执行
     */
    $(document).ready(function () {
        Login.init();
    });


    /**
     * 封装从this中取数据的功能
     * this：代表调用此方法的那个标签（newForm)
     */
    $.fn.serializeObject = function () {
        var o = {};//放数据用的

        var a = this.serializeArray();
        $.each(a,function () {
            if(o[this.name]) {
                if(!o[this.name].push) {
                    o[this.name] = this.value;
                }
                o[this.name].push(this.value || '')
            } else {
                o[this.name] = (this.value || '')
            }
        });
        return o;
    }
</script>

2、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body style="text-align: center">
    <span style="font-size: 60px;">首页</span>
</body>
</html>

3、LoginController

package com.zpark.neimin.first.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.Map;

@Controller
public class LoginController {
    @RequestMapping("/")
    public String Login(){
        return "login";
    }

    @RequestMapping("/login.json")
    @ResponseBody
    public Map recieveDate(@RequestBody Map<String, Object> loginData) {
        Map<String, Object> map = new HashMap<>();
        String loginName = loginData.get("loginName").toString();
        System.out.println(".......controller");
        return map;
    }

    @RequestMapping(value = "/index.html")
    public String test() {
        System.out.println("......index");
        return "index";
    }
}

jquery项目工程3