ExtJS提交到服务器端的方式以及简单的登录实现

ExtJS平台已经搭建好了，那么接下来要做网站的登录页面，当然还是在jsp页面里加载extjs的，首先我们先了解一下关于extjs是如何提交到服务器端的：

1、EXT的form表单ajax提交（默认提交方式） 

　  相对单独的ajax提交来说优点在于能省略写参数数组，参考代码

var formPanl = new Ext.FormPanel( { });//里边的参数就不写了
function login(item) {
if (validatorForm()) {
// 登录时将登录按钮设为disabled，防止重复提交
this.disabled = true;
// 第一个参数可以为submit和load
formPanl.form.doAction('submit', {
url : 'dologin.html?method=login',
method : 'post',
// 如果有表单以外的其它参数，可以加在这里。我这里暂时为空，也可以将下面这句省略
params : '',
// 第一个参数是传入该表单，第二个是Ext.form.Action对象用来取得服务器端传过来的json数据
success : function(form, action) {
Ext.Msg.alert('操作', action.result.data);
this.disabled = false;
},
failure : function(form, action) {
Ext.Msg.alert('警告', '用户名或密码错误！');
// 登录失败，将提交按钮重新设为可操作
this.disabled = false;
}
});
this.disabled = false;   
}  

2、EXT表单的非ajax提交  在表单需加入下列代码      

//实现非AJAX提交表单一定要加下面的两行！
onSubmit : Ext.emptyFn, submit : function() {
//再次设定action的地址
this.getEl().dom.action ='dologin.html?method=login'; this.getEl().dom.method = 'post';
//提交submit
this.getEl().dom.submit();
}

3、EXT的ajax提交 ，个人认为经常用的一种方式

Ext.Ajax.request({
url: 'dologin.html', //请求地址
//method : 'post', //默认post
//提交参数组
params: {
loginName:"",
loginPassword:""
},
//成功时回调
success: function(response, options) {
//获取响应的json字符串
var jsonData = Ext.util.JSON.decode(response.responseText); //从extjs4.0之后JSON类变成了Ext.JSON,而之前的是Ext.util.JSON
if(jsonData.data){
Ext.Msg.alert('恭喜','您已成功登录！');
} else{
Ext.Msg.alert('失败','登录失败，请重新登录');
}
}
});

具体登录的话根据代码可以自己去实现，基本上都是extjs的语法,当登录成功之后即可跳转至首页或指定的页面。

 

转载于:https://www.cnblogs.com/xiaofeilee/p/4178406.html