extJS提交服务器主要有这样几种方式: Ext.Ajax.request,form.submit,getEl().dom.submit(),以下是详细介绍:
1、EXT的form表单ajax提交(默认提交方式)
相对单独的ajax提交来说优点在于能省略写参数数组,将按钮添加单击事件,执行以下方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
function
loginSubmit(item) {
if
(validatorForm()) {
// 登录时将登录按钮设为disabled,防止重复提交
this
.disabled =
true
;
// 第一个参数可以为submit和load
formPanl.form.doAction(
'submit'
, {
url :
'login.do?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的form表单直接submit提交
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
var
fp = Ext.create(
'Ext.form.Panel'
, {
...
buttons: [{
text:
'Save'
,
formBind:
true
,
handler:
function
(){
if
(fp.getForm().isValid()){
fp.getForm().submit({
url:
'form-submit.php'
,
waitMsg:
'请稍后,正在提交数据...'
,
success:
function
(form, action){
Ext.Msg.alert(
'操作'
, action.result.data);
},
failure:
function
(form, action){
if
(action.failureType === Ext.form.action.Action.CONNECT_FAILURE) {
Ext.Msg.alert(
'错误'
,
'Status:'
+action.response.status+
': '
+
action.response.statusText);
}
if
(action.failureType === Ext.form.action.Action.SERVER_INVALID){
Ext.Msg.alert(
'Invalid'
, action.result.errormsg);
}
}
});
}
}
},{
text:
'Reset'
,
handler:
function
(){
fp.getForm().reset();
}
}]
});
|
3、Extjs form表单的非ajax提交
在表单需加入下列代码 :
1
2
3
4
5
6
7
8
|
//实现非AJAX提交表单一定要加下面的两行
// onSubmit : Ext.emptyFn, submit : function() {
//再次设定action的地址
this
.getEl().dom.action =
'login.do?userName=login'
;
this
.getEl().dom.method =
'post'
;
//提交submit
this
.getEl().dom.submit();
}
|
4、Extjs form表单的Ext.Ajax.request提交
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
Ext.Ajax.request({
//请求地址
url:
'login.do'
,
method:
'post'
,
//提交参数组
params: {
userName:Ext.get(
'userName'
).dom.value,
userPassword:Ext.get(
'userPassword'
).dom.value
},
//成功时回调
success:
function
(response, options) {
//获取响应的json字符串
var
json = Ext.util.JSON.decode(response.responseText);
if
(json.success==
true
){
Ext.Msg.alert(
'恭喜'
,
'您已成功登录!'
);
}
else
{
Ext.Msg.alert(
'失败'
,
'登录失败,请重新登录'
);
}
})
});
|