一、截图和示例共用Ext.FormPanel
1.1 截图
由于本文主要关注的是表单提交的几种方式，所以仅用了一个表单项以便于测试和减少示例代码。
1.2 示例共用Ext.FormPanel
二、普通方式提交
适合一次操作页面，即提交后跳转到另外一个页面。
前台代码：
后台代码：
三、Ajax方式提交
3.1 默认方式
客户端代码：
a). 服务器端必须返回JSON格式，success返回true则执行 success: function (form, action) 里面的代码，返回false则执行 failure: function (form, action) 中的代码。
b). 服务器端必须 Response.End();
写测试代码的时候就是因为没有按这个格式返回，一直以为客户端代码是否有问题，耽误了挺多时间。
3.2 通过Ext.data.Connection提交数据
客户端代码：
这里就没有限制返回的数据格式了，但仍需要设置Response.End()，所以默认在PageBase里面设置了此代码。
3.3 通过Ext.Ajax提交数据
客户端代码：
a). 服务器端处理返回数据后都需要 Response.End();
b). 很明显，Ajax的特点之一就是不刷新页面，提高用户体验。
c). 回调分为callback和success+failure两种方式，后面是将前面的拆成2个函数来处理。
四、下载
1.1 截图
由于本文主要关注的是表单提交的几种方式，所以仅用了一个表单项以便于测试和减少示例代码。
1.2 示例共用Ext.FormPanel
<
script type
=
"
text/javascript
"
>
Ext.onReady( function () {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = ' side ' ;
var form1 = new Ext.FormPanel({
frame: true ,
renderTo: Ext.getBody(),
title: ' <center>表单提交</center> ' ,
style: ' margin-left:auto;margin-right:auto;width:500px;margin-top:8px; ' ,
labelAlign: ' right ' ,
labelWidth: 170 ,
buttonAlign: ' center ' ,
items: [ new TextField( ' param2 ' , ' 表单项 ' )]
});
});
< / script>
关于封装后的表单控件，可以参照系列的前几篇文章，也可以在后面的源代码里面找到相关的封装代码。
Ext.onReady( function () {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = ' side ' ;
var form1 = new Ext.FormPanel({
frame: true ,
renderTo: Ext.getBody(),
title: ' <center>表单提交</center> ' ,
style: ' margin-left:auto;margin-right:auto;width:500px;margin-top:8px; ' ,
labelAlign: ' right ' ,
labelWidth: 170 ,
buttonAlign: ' center ' ,
items: [ new TextField( ' param2 ' , ' 表单项 ' )]
});
});
< / script>
二、普通方式提交
适合一次操作页面，即提交后跳转到另外一个页面。
前台代码：
text:
"
普通方式
"
,
handler: function (){
if (form1.form.isValid()){
// 只用指定TextField的id或者name属性，服务器端Form中就能取到表单的数据
// 如果同时指定了id和name，那么name属性将作为服务器端Form取表单数据的Key
var form = form1.getForm().getEl().dom;
form.action = ' submit.aspx?method=Submit1¶m1=abc ' ;
// 指定为GET方式时,url中指定的参数将失效，表单项转换成url中的key=value传递给服务端
// 例如这里指定为GET的话,url为:submit.aspx?param2=你输入的值
// form.method = 'GET';//GET、POST
form.submit();
}
}
代码说明：这段代码加在buttons:[{}]里面中。
handler: function (){
if (form1.form.isValid()){
// 只用指定TextField的id或者name属性，服务器端Form中就能取到表单的数据
// 如果同时指定了id和name，那么name属性将作为服务器端Form取表单数据的Key
var form = form1.getForm().getEl().dom;
form.action = ' submit.aspx?method=Submit1¶m1=abc ' ;
// 指定为GET方式时,url中指定的参数将失效，表单项转换成url中的key=value传递给服务端
// 例如这里指定为GET的话,url为:submit.aspx?param2=你输入的值
// form.method = 'GET';//GET、POST
form.submit();
}
}
后台代码：
///
<summary>
/// POST普通提交
/// </summary>
/// <returns></returns>
public void Submit1()
{
// 数据库操作
string param1 = Request.QueryString[ " param1 " ];
string param2 = Request.Form[ " param2 " ];
// Response.Write(string.Format("param1(GET):{0}<br />param2(POST):{1}<br />", Request.QueryString["param1"], Request.Form["param2"]));
// 页面掉转
Response.Redirect( " esayadd.aspx " );
}
普通提交我也翻阅了不少文章，在3.0版本中可以如上实现比较简单，或者直接设置FormPanel的
standardSubmit:true
属性，则下面默认Ajax提交方式也将变成普通的表单提交。注意这里并不需要设置 onSubmit: Ext.emptyFn等，表单项的id和name指定也在注释里面有说明了。
/// POST普通提交
/// </summary>
/// <returns></returns>
public void Submit1()
{
// 数据库操作
string param1 = Request.QueryString[ " param1 " ];
string param2 = Request.Form[ " param2 " ];
// Response.Write(string.Format("param1(GET):{0}<br />param2(POST):{1}<br />", Request.QueryString["param1"], Request.Form["param2"]));
// 页面掉转
Response.Redirect( " esayadd.aspx " );
}
三、Ajax方式提交
3.1 默认方式
客户端代码：
text:
"
默认方式
"
,
handler: function (){
form1.getForm().submit({
url: ' submit.aspx?method=Submit2¶m1=abc ' ,
// method:'POST',
// waitTitle : "提示",
// waitMsg: 'Submitting your data
',
success: function (form, action){
alert(action.response.responseText);
},
failure: function (form, action){
alert(action.result.errormsg);
}
});
}
服务器端代码：
handler: function (){
form1.getForm().submit({
url: ' submit.aspx?method=Submit2¶m1=abc ' ,
// method:'POST',
// waitTitle : "提示",
// waitMsg: 'Submitting your data
',
success: function (form, action){
alert(action.response.responseText);
},
failure: function (form, action){
alert(action.result.errormsg);
}
});
}
///
<summary>
/// 默认方式
/// </summary>
public void Submit2()
{
string param1 = Request.QueryString[ " param1 " ];
string param2 = Request.Form[ " param2 " ];
// 必须返回JOSIN形式数据
Response.Write( " {success:true} " );
Response.End();
}
代码说明：
/// 默认方式
/// </summary>
public void Submit2()
{
string param1 = Request.QueryString[ " param1 " ];
string param2 = Request.Form[ " param2 " ];
// 必须返回JOSIN形式数据
Response.Write( " {success:true} " );
Response.End();
}
a). 服务器端必须返回JSON格式，success返回true则执行 success: function (form, action) 里面的代码，返回false则执行 failure: function (form, action) 中的代码。
b). 服务器端必须 Response.End();
写测试代码的时候就是因为没有按这个格式返回，一直以为客户端代码是否有问题，耽误了挺多时间。
3.2 通过Ext.data.Connection提交数据
客户端代码：
text:
"
Connect方式
"
,
handler: function (){
// 注意
var conn = new Ext.data.Connection();
conn.request({
url: ' submit.aspx?method=Submit4 ' ,
// 此处与params对应，如果为POST，则服务器端从Request.Form中可以取得到数据，反之从QueryString中取数据
method: ' POST ' , // GET
params:form1.form.getValues(),
success: function (response, opts) {
MsgInfo(response.responseText);
}
});
}
服务器端代码：
handler: function (){
// 注意
var conn = new Ext.data.Connection();
conn.request({
url: ' submit.aspx?method=Submit4 ' ,
// 此处与params对应，如果为POST，则服务器端从Request.Form中可以取得到数据，反之从QueryString中取数据
method: ' POST ' , // GET
params:form1.form.getValues(),
success: function (response, opts) {
MsgInfo(response.responseText);
}
});
}
//
/ <summary>
// / Connect方式
// / </summary>
public void Submit3()
{
string param1 = Request.QueryString[ " param1 " ];
string param2 = Request.Form[ " param2 " ];
Response.Write( " ok " );
Response.End();
}
代码说明：
// / Connect方式
// / </summary>
public void Submit3()
{
string param1 = Request.QueryString[ " param1 " ];
string param2 = Request.Form[ " param2 " ];
Response.Write( " ok " );
Response.End();
}
这里就没有限制返回的数据格式了，但仍需要设置Response.End()，所以默认在PageBase里面设置了此代码。
3.3 通过Ext.Ajax提交数据
客户端代码：
//
Ext.Ajax是继承Ext.data.Connection而来
text: " Ajax方式 " ,
handler: function (){
Ext.Ajax.request({
url: ' submit.aspx?method=Submit3 ' ,
method: ' POST ' ,
// jsonData://指定需要发送给服务器端的JSON数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。
// xmlData://指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。
params:form1.form.getValues(), // 取得key/value对象数组
// 指定Ajax请求的回调函数，该函数不管是调用成功或失败，都会执行。
callback: function (options, success, response) {
if (success){
MsgInfo(response.responseText);
}
}
});
}
服务器端代码：
text: " Ajax方式 " ,
handler: function (){
Ext.Ajax.request({
url: ' submit.aspx?method=Submit3 ' ,
method: ' POST ' ,
// jsonData://指定需要发送给服务器端的JSON数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。
// xmlData://指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。
params:form1.form.getValues(), // 取得key/value对象数组
// 指定Ajax请求的回调函数，该函数不管是调用成功或失败，都会执行。
callback: function (options, success, response) {
if (success){
MsgInfo(response.responseText);
}
}
});
}
///
<summary>
/// Ajax方式
/// </summary>
public void Submit4()
{
string param1 = Request.QueryString[ " param1 " ];
string param2 = Request.Form[ " param2 " ];
Response.Write( " yes " );
Response.End();
}
Ajax方式提交总结：
/// Ajax方式
/// </summary>
public void Submit4()
{
string param1 = Request.QueryString[ " param1 " ];
string param2 = Request.Form[ " param2 " ];
Response.Write( " yes " );
Response.End();
}
a). 服务器端处理返回数据后都需要 Response.End();
b). 很明显，Ajax的特点之一就是不刷新页面，提高用户体验。
c). 回调分为callback和success+failure两种方式，后面是将前面的拆成2个函数来处理。
四、下载
本文转自博客园农民伯伯的博客，原文链接：ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ]，如需转载请自行联系原博主。
