This article mainly introduces four Ajax asynchronous submission methods commonly used in extJS. For more information, see /**
The Code is as follows:
* The first Ajax submission method
* In this method, you must directly use the ext Ajax Method for submission.
* To use this method, you need to encapsulate the parameters to be passed.
* @ Return
*/
Function saveUser_ajaxSubmit1 (){
Ext. Ajax. request ({
Url: 'user _ save. action ',
Method: 'post ',
Params :{
UserName: document. getElementById ('username'). value,
Password: document. getElementById ('Password'). value
},
Success: function (response, options ){
Var o = Ext. util. JSON. decode (response. responseText );
Alert (o. msg );
},
Failure: function (){
}
});
}
/**
* Second Ajax submission method
* This method specifies an html form for ext ajax.
* Using this method, you do not need to encapsulate the parameters to be passed.
*
* @ Return
*/
Function saveUser_ajaxSubmit2 (){
Ext. Ajax. request ({
Url: 'user _ save. action ',
Method: 'post ',
Form: 'userform', // specifies the form
Success: function (response, options ){
Var o = Ext. util. JSON. decode (response. responseText );
Alert (o. msg );
},
Failure: function (){
}
});
}
/**
* Third Ajax submission method
* This method is used to submit the ext form.
* To use this method, you must use ext's textField component.
*
* @ Return
*/
Function saveUser_ajaxSubmit3 (){
// Define the form
Var formPanel = new Ext. FormPanel ({
LabelWidth: 75,
Frame: true,
BodyStyle: 'padding: 5px 5px 0 ',
Width: 350,
Defaults :{
Width: 230
},
DefaultType: 'textfield ',
Items :[{
FieldLabel: 'username ',
Name: 'username ',
AllowBlank: false
},{
FieldLabel: 'password ',
Name: 'Password'
}]
});
// Define the window
Var win = new Ext. Window ({
Title: 'add user ',
Layout: 'fit ',
Width: 500,
Height: 300,
CloseAction: 'close ',
Closable: false,
Plain: true,
Items: formPanel,
Buttons :[{
Text: 'OK ',
Handler: function (){
Var form = formPanel. getForm ();
Var userName = form. findField ('username'). getValue (). trim ();
Var password = form. findField ('Password'). getValue (). trim ();
If (! UserName ){
Alert ('user name cannot be blank ');
Return;
}
If (! Password ){
Alert ('password cannot be blank ');
Return;
}
Form. submit ({
WaitTitle: 'Please wait ...',
WaitMsg: 'saving user information. Please wait ...',
Url: 'user _ save. action ',
Method: 'post ',
Success: function (form, action ){
Alert (action. result. msg );
},
Failure: function (form, action ){
Alert (action. result. msg );
}
});
}
},{
Text: 'cancel ',
Handler: function (){
Win. close ();
}
}]
});
Win. show ();
}
/**
* Method 4: Ajax submission
* In this way, html forms are converted to ext forms for asynchronous submission.
* To use this method, you must define the html form.
*
* @ Return
*/
Function saveUser_ajaxSubmit4 (){
New Ext. form. BasicForm ('userform'). submit ({
WaitTitle: 'Please wait ...',
WaitMsg: 'saving user information. Please wait ...',
Url: 'user _ save. action ',
Method: 'post ',
Success: function (form, action ){
Alert (action. result. msg );
},
Failure: function (form, action ){
Alert (action. result. msg );
}
});
}