在做实例之前,首先要明白自己要做到是什么东西,这样才能动手去做,一个简单的流程图:
所以做登录实例很简单,就所简单的做好页面,发送请求,服务端准备好JSON到数据格式返回给客户端。
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('系统提示','登录成功!'); //可以进行别的业务操作,比如@R_176_404@面到你到主页面 },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,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","密码错误!"); * **/ 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,QQ群:197331959
http://www.hatustudio.comLeetop/Ext项目论坛
看文章评论一下是美德!!!
原文链接:https://www.f2er.com/json/290752.html