jquery

<script type="text/javascript">
 
    var Login = function(){
        return {
            /**
             * 点击按钮-----获取form表单中的数据----放到d中
             */
            getLoginData: function () {
                $('#btnLogin').click(function () {
                    var info = $('form').serializeArray();
                    //info:两个Object
 
                    var d = {};
                    //循环
                    $.each(info, function () {
                        d[this.name] = this.value;//this代表当前循环的object  第一次是[username:ddd]
                    })
 
                    alert('.....info' + JSON.stringify(d));
                    //将提取到的数据发送给后台（Controller)
                    Login.sendDataToController(d);
                })
            },
            /**
             * 用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)
                    }
                });
            }
        }
    }();
 
 
    /**
     * 页面加载完成后执行
     */
    $(document).ready(function () {
        Login.getLoginData();
    });
</script>

<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]
                })
                Login.sendDataToController(d);
 
            },
            /**
             * 用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)
                    }
                });
            }
        }
    }();
 
 
    /**
     * 页面加载完成后执行
     */
    $(document).ready(function () {
        Login.init();
    });
</script>

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";
    }
}

实体类的情况：

BaseResult

package com.zpark.neimin.first.common;
 
public class BaseResult {
 
    private boolean isSuccess;
 
    public boolean isSuccess() {
        return isSuccess;
    }
 
    public void setSuccess(boolean success) {
        isSuccess = success;
    }
 
    @Override
    public String toString() {
        return "BaseResult{" +
                "isSuccess=" + isSuccess +
                '}';
    }
}

Controller

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

Ajax：

$.ajax({
                    url:"/login.json",
                    contentType: "application/json;charset=UTF-8",
                    type: "post",
                    data: JSON.stringify(param),
 
                    success: function (resp) {
 
                        if(resp.success) {
                            alert(".....提交成功" + resp.toString());
                        }
 
                        location.href="/index.html"
                    }
                });

1.加载两个文件件(模板）

<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>

2.调用：

<script>
 
        $('#btnLogin').click(function () {
           // alert("........alery....");
           // swal("hello");
            sweetAlert("hello");
        });
    </script>

完整代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<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" οnsubmit="return false">
    <div>
        <input id="loginName", name="loginName" type="text">
    </div>
    <div>
        <input id="loginPwd", name="loginPed" type="password">
    </div>
    <button type="submit" id="btnLogin">登陆</button>
 
</form>
 
    <script>
 
        $('#btnLogin').click(function () {
           // alert("........alery....");
           // swal("hello");
            sweetAlert("hello");
        });
    </script>
 
    <!--<th:block th:replace="js/login_js"></th:block>-->
</body>
</html>