ExtJS4+JSON+Servlet/Struts2实现登录验证

在做实例之前,首先要明白自己要做到是什么东西,这样才能动手去做,一个简单的流程图:


所以做登录实例很简单,就所简单的做好页面,发送请求,服务端准备好JSON到数据格式返回给客户端。

页面的Ext的代码:

            Ext.onReady(function() {
			var loginForm = Ext.create('Ext.form.Panel', {
		        bodyStyle:'padding:5px 5px 0',
		        width: 350,
		        border : false,
		        fieldDefaults: {
		            msgTarget: 'side',
		            labelWidth: 30
		        },
		        defaultType: 'textfield',
		        defaults: {
		            anchor: '100%'
		        },

		        items: [{
		            fieldLabel: '帐号',
		            name: 'userName', //就所HTML标记中到name=“”
		            allowBlank:false,
		            blankText : '请输入帐号'
		        },{
		            fieldLabel: '密码',
		            name: 'passWord',
		            inputType : 'password', //输入类型
		            allowBlank:false,
		            blankText : '请输入密码'
		        }]
		    });
			
			var loginWindow = Ext.create('Ext.window.Window',{
				title : '登录',
				items : [loginForm],
				plain : true,
				resizable : false,
				buttonAlign : 'center',
				buttons: [{
		            text: '登录',
		            handler : function(){
		            	if (loginForm.form.isValid()) {
					loginForm.form.submit({
						waitTitle : '请稍候',
						waitMsg : '正在登录......',
						url : 'login', //提交到servlet地址
						success : function(form, action) {
  							Ext.Msg.alert('系统提示','登录成功!');
  							//可以进行别的业务操作,比如跳转页面到你到主页面
						},
						failure : function(form, action) {
							if(action.result){
								Ext.Msg.alert('系统提示',action.result.text);
							}else{
								loginForm.form.reset();
							}
						}
					});
				}
		            }
		        },{
		            text: '重置',
		            handler : function(){
		            	loginForm.form.reset();
		            }
		        }]
			});
			
			loginWindow.show();
		});

servlet代码,主要是获取页面到数据,进行比对,然后返回给页面一到字符串。

其实Ext提交表单是用到Ajax方式,所以也适用一切Ajax提交的方式。主要所通过HttpServletResponse向页面传输数据:

package servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class LoginServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		
		String userName = request.getParameter("userName");
		String passWord = request.getParameter("passWord");
		String result = "";
		/**
		 * 判断用户名存不存在到思路:通过用户名那个去查找用户表,如果没有找到记录说明不存在用户
		 * 如果存在,取出记录(唯一的)核对密码,通过则登录成功,否则密码错误
		 * */
		if(userName.equals("admin")){ 
			if(passWord.equals("pwd")){
				/**
				 * 通过JSONObject构造返回到数据
				 * JSONObject json = new JSONObject();
				 * json.element("success", true);
				 * json.element("text", "登录成功!");
				 * **/
				
				result = "{success : true,text : \"登录成功!\"}";
			}else{
				/**
				 * JSONObject json = new JSONObject();
				 * json.element("failure", true);
				 * json.element("text", "密码错误!");
				 * **/
				result = "{failure : true,text : \"密码错误!\"}";
			}
		}else{
			/**
			 * JSONObject json = new JSONObject();
			 * json.element("failure", true);
			 * json.element("text", \""+userName+"用户不存在!\");
			 * **/
			result = "{failure : true,text : \""+userName+"用户不存在!\"}";
		}
		
		/**
		 * response.getWriter().print(json.toString());
		 * json.toString()输出到就是"{fail : true,text : \"密码错误!\"}"格式到字符串
		 * 输出结构怎么样去构造,根据实际需求来,直接用字符串的形式很高效。前提是你的输出结果很简单
		 * 如果所复杂的结果就必须借助与JSONObject对象来了,开发GridPanel到时候就得用到JSONObject对象准备数据了
		 * */
		response.getWriter().print(result);
		response.getWriter().close();
	}
}

这个就是简单到ExtJS做的登录验证,然而Struts2怎么做这个验证呢,很简单:

只要在Action里面能拿到HttpServletResponse对象就可以了,向页面写入一些ExtJS接受的JSON字符串就可以了!

实例下载:http://download.csdn.net/source/3555064,:197331959

http://www.hatustudio.comLeetop/Ext项目论坛

看文章评论一下是美德!!!


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值