Spring MVC 使用ajax异步交互返回数据

最新推荐文章于 2022-08-27 14:35:42 发布

左手121

最新推荐文章于 2022-08-27 14:35:42 发布

阅读量545

点赞数

分类专栏： jsp 文章标签： spring mvc ajax

本文链接：https://blog.csdn.net/qq_20282263/article/details/52832305

版权

jsp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML

<form id="signinform">
        <div class="sign_in">
            <div>
                <label for="username"> 用户名 </label> <input type="text" class="input"
                    id="username" name="username" placeholder="邮箱号" />
            </div>
            <div>
                <label for="passwd"> 密码 </label> <input type="password"
                    class="input" id="passwd" name="passwd" placeholder="邮箱密码" />
            </div>
            <div id="IDcode">
                <label for="passcode"> 验证码 </label>
                <div>
                    <input type="text" class="input_IDcode" id="passcode"
                        name="passcode" placeholder="填写右侧的验证码" /> <img
                        src="sign/IDcode.do" class="IDcodeImg" />
                </div>
            </div>
            <div>
                <input type="submit" value="登录" class="but-submit" />
                <div class="msg"></div>
            </div>
        </div>
    </form>

JS

function signinformValidate() {
    return {
        rules : {
            username : {
                required : true,
                rangelength : [ 6, 6 ]
            },
            passwd : {
                required : true
            },
            passcode : {
                required : true
            }
        },
        messages : {
            username : {
                required : "请输入用户名",
                rangelength : "输入长度错误"
            },
            passwd : {
                required : "请输入密码"
            },
            passcode : {
                required : "请输入验证码"
            }
        },
        messages : {
            f_username_txt : {
                required : "请输入用户名",
                rangelength : "输入长度错误"
            },
            f_passwd_txt : {
                required : "请输入密码"
            },
            f_passcode_txt : {
                required : "请输入验证码"
            }
        },
        errorPlacement : function(error, element) {
            if (element.attr("name") == "f_passcode_txt") {
                error.appendTo(element.parent().parent());
            } else {
                error.appendTo(element.parent());
            }
        },
        submitHandler : function() {
            $("#signinform").ajaxSubmit({
                type : "post",
                url : "sign/signin.do",
                // 提交form的时候不需要传递参数，springMVC会自动匹配
                beforeSubmit : function() {
                    $(".msg").text("正在登录......");
                    $(".but-submit").attr("disabled", true);
                },
                success : function(data) {
                    alert(data);
                },
                error : function() {
                    $(".msg").text("登录失败，请联系管理员！");
                    $(".but-submit").attr("disabled", false);
                }
            });
            return false;
        }
    };
}

Controller

不知道如何获取参数，请阅读：
http://blog.csdn.net/qq_20282263/article/details/52832208

/**
     * @responsebody表示该方法的返回结果直接写入HTTP response body中
     *                                 一般在异步获取数据时使用，在使用@RequestMapping后，返回值通常解析为跳转路径，
     *                                 加上@responsebody后返回结果不会被解析为跳转路径，而是直接写入HTTP
     *                                 response body中。
     *                                 比如异步获取json数据，加上@responsebody后，会直接返回json数据。
     * @param signin
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/signin.do", method = RequestMethod.POST)
    public String sifnIn(@ModelAttribute(value = "signin") SignIn signin) {
        return signin.getUsername() + signin.getPasswd() + signin.getPasscode();
    }

    /**
     * 方法二，直接使用PrintWriter输出
     * 
     * @param signin
     * @param write
     */
    @RequestMapping(value = "/signin2.do", method = RequestMethod.POST)
    public void sifnIn2(@ModelAttribute(value = "signin") SignIn signin, PrintWriter write) {
        write.write(signin.getUsername() + signin.getPasswd() + signin.getPasscode());
        // flush表示不知道输出的内容有多少进行分段输出
        write.flush();
        write.close();
    }

    /**
     * 方法三，等同于方法二
     * PrintWriter = Response.getWriter()
     * 
     * @param signin
     * @param write
     * @throws IOException 
     */
    @RequestMapping(value = "/signin3.do", method = RequestMethod.POST)
    public void sifnIn3(@ModelAttribute(value = "signin") SignIn signin, HttpServletResponse response) throws IOException {
        response.getWriter().write(signin.getUsername() + signin.getPasswd() + signin.getPasscode());
        response.getWriter().flush();
        response.getWriter().close();
    }