Ext4.2Ajax登录简单示例

最新推荐文章于 2021-04-14 20:21:51 发布

躁动的青年

最新推荐文章于 2021-04-14 20:21:51 发布

阅读量114

点赞数

分类专栏： Ext 文章标签： Ext Ajax 登录

本文链接：https://blog.csdn.net/haveqing/article/details/84711730

版权

Ext 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

环境

Extjs 4.2.1

spring MVC 3.2.12

mybatis 3.2.8

效果图

jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% String path = request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
<link href="<%=path%>/static/ext-4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<script src="<%=path%>/static/ext-4.2.1/bootstrap.js"></script>
<script src="<%=path%>/static/ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
    function init() {
        Ext.MessageBox.alert("ExtJS", "Hello ExtJS");
    }
    //Ext.onReady(init);
    Ext.onReady(function(){
    	var form = new Ext.form.Panel({
            border: false,
            fieldDefaults: {
                labelWidth: 60
            },
            defaultType: 'textfield',
            bodyPadding: 5,

            items: [{
            	xtype: 'textfield',
            	fieldLabel: '用户名',
                name: 'username',
                value:'admin',
                anchor:'100%'  // anchor width by percentage
            },{
                xtype: 'textfield',
                inputType: 'password',
                fieldLabel: '密码',
                name: 'password',
                value:'123456',
                anchor: '100%'
            }]
        });

        new Ext.window.Window({
            autoShow: true,
            title: '登录',
            width: 400,
            height:200,
            minWidth: 300,
            minHeight: 200,
            layout: 'fit',
            plain: true,
            items: form,

            buttons: [{
                text: '登录',
                handler: function() {
                    login();
                }
            },{
                text: '重置',
                handler: function() {
                    form.getForm().reset();
                }
            }]
        });
        
        function login(){
        	form.submit({
				url : '<%=path%>/login.json',
				method : 'POST',
				success : function(form, action) {
			        var msg = action.result.msg;
			        if(msg == "success"){
			        	location.href = "<%=path%>/";
			        } else {
			        	Ext.Msg.alert('提示', msg);  
			        }
				},
				failure : function(form, action) {
					Ext.Msg.alert('提示', "登录请求失败！");
					//var data = action.response.responseText;
				}
			});
		}
    });
</script>

</head>
<body>

</body>
</html>

LoginController

@RequestMapping(value = "/login", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
	//@ResponseBody
	public ModelMap loginPost(HttpServletRequest request, HttpServletResponse response, ModelMap model) {
		//log.info("loginPost");
		String username  = request.getParameter("username");
		String password  = request.getParameter("password");
		User user = userSerive.getByUserName(username);
		if(user == null){
			model.put("success", true);
			model.put("msg","用户不存在！");
		} else if(!user.getPassword().equals(MD5Util.encode(password+"{"+username+"}"))){
			model.put("success", true);
			model.put("msg","密码错误！");
		} else {
			//加载用户的角色
			List<Role> roles = roleSerive.getListByUserId(user.getId());
			user.setRoles(roles);
			request.getSession(true).setAttribute("user", user);
			super.setSession(request.getSession(false));
			model.put("success", true);
			model.put("msg","success");
		}
		return model;
	}

躁动的青年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext4.2Ajax登录简单示例

环境Extjs 4.2.1spring MVC 3.2.12mybatis 3.2.8效果图jsp：&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;% String path = request.getC...
复制链接

扫一扫

专栏目录