ssm框架完成前端的ajax登录

最新推荐文章于 2024-08-19 21:18:25 发布

qq_270490096

最新推荐文章于 2024-08-19 21:18:25 发布

阅读量3.2k

点赞数 1

分类专栏： java 文章标签： SSM ajax spring jquery

java 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

首先，引入jquery的包：

[javascript]view plain copy
<script type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.min.js"></script>  
<script type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>  
<script type="text/javascript" src="../js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>  

然后前端对应的代码：

[html]view plain copy
<body style="background-color: #F3F3F3">  
    <div class="easyui-dialog" title="管理员登录" data-options="closable:false,draggable:false"  
        style="width: 400px; height: 300px; padding: 10px;">  
        <div style="margin-left: 50px; margin-top: 50px;">  
            <div style="margin-bottom: 20px;">  
                <div>  
                    用户名:  
                    <input name="username" class="easyui-textbox" data-options="required:true"  
                        style="width: 200px; height: 32px" value="admin" />  
                </div>  
            </div>  
            <div style="margin-bottom: 20px">  
                <div>  
                    密   码:  
                    <input name="password" class="easyui-textbox" type="password"  
                        style="width: 200px; height: 32px" data-options="required:true" value="admin" />  
                </div>  
            </div>  
            <div>  
                <a id="login" class="easyui-linkbutton" iconCls="icon-ok"  
                    style="width: 100px; height: 32px; margin-left: 50px">登录</a>  
            </div>  
        </div>  
    </div>  

然后ajax的异步请求的js：

[javascript]view plain copy
<script type="text/javascript">  
        /* 登录 */  
        $("#login").click(function() {  
            var username = $("[name=username]").val();  
            var password = $("[name=password]").val();  
  
            if (username == '' || password == '') {  
                $.messager.alert('错误', "用户名或者密码为空！");  
                return;  
            }  
  
            /* ajax请求 */  
            $.ajax({  
                url : "/rest/login",  
                type : "post",  
                data : {  
                    "username" : username,  
                    "password" : password  
                },  
                dataType : "text",  
                success : function(data) {  
                    if (data != null && data == 'index') {  
  
                        window.location.href = "/page/index";  
  
                    } else if (data != null && data == 'login') {  
  
                        $.messager.alert('错误', "用户名或者密码为空！");  
                        return;  
                    }  
                }  
            });  
  
        });  
  
    </script>  
</body>  

最后后台代码：

[java]view plain copy
@Controller  
@RequestMapping("/rest")  
public class LoginAndRegistController {  
  
    @Autowired  
    UserService userService;  
  
    /*** 
     * 登录 
     *  
     * @param username 
     * @param password 
     * @return 
     */  
    @ResponseBody  
    @RequestMapping(value = "/login")  
    public String login(String username, String password) {  
  
        TbUser user = userService.selectByExample(username, password);  
  
        if (user != null) {  
  
            return "index";  
        }  
  
        return "login";  
    }  
  
}  