ExtJs 备忘录(4)—— Form表单(四) [ 数据提交 ]
数据 提交 表单 Form Extjs 备忘录
2023-09-14 09:00:58 时间
前言
忙的时候再一懒、再加上中途没能迅速解决一些问题,所以把文章拖延到了国庆,不过总算是在今天搞定了。这系列文章可能全部完成可能需要继续延后了,有计划继续写视频监控方面的文章,所以尽量合理安排吧 : )
系列
1. ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ]
2. ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ]
3. ExtJs 备忘录(3)—— Form表单(三) [ 数据验证 ]
4. ExtJs 备忘录(4)—— Form表单(四) [ 数据提交 ]
推荐
1. EXTJS FORM技巧一表单不使用AJAX方式提交?
2. 三种Ext提交数据的方法 3. ExtJS表单提交与加载全攻略
版本
Ext 3.0
正文
一、截图和示例共用Ext.FormPanel
1.1 截图
![](http://images.cnblogs.com/cnblogs_com/over140/2009/9/2009-10-2.PNG)
由于本文主要关注的是表单提交的几种方式,所以仅用了一个表单项以便于测试和减少示例代码。
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
关于封装后的表单控件,可以参照系列的前几篇文章,也可以在后面的源代码里面找到相关的封装代码。
二、普通方式提交
适合一次操作页面,即提交后跳转到另外一个页面。
前台代码:
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 param1=abc;
//指定为GET方式时,url中指定的参数将失效,表单项转换成url中的key=value传递给服务端
//例如这里指定为GET的话,url为:submit.aspx?param2=你输入的值
//form.method = GET;//GET、POST
form.submit();
}
}
代码说明:这段代码加在buttons:[{}]里面中。
后台代码:
/// 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指定也在注释里面有说明了。
三、Ajax方式提交
3.1 默认方式
客户端代码:
text: "默认方式",
handler:function(){
form1.getForm().submit({
url:submit.aspx?method=Submit2 param1=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();
}
代码说明:
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);
}
});
}
服务器端代码:
/// summary
/// 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);
}
}
});
}
服务器端代码:
/// summary
/// Ajax方式
/// /summary
public void Submit4()
{
string param1 = Request.QueryString["param1"];
string param2 = Request.Form["param2"];
Response.Write("yes");
Response.End();
}
Ajax方式提交总结:
a). 服务器端处理返回数据后都需要Response.End();
b). 很明显,Ajax的特点之一就是不刷新页面,提高用户体验。
c). 回调分为callback和success+failure两种方式,后面是将前面的拆成2个函数来处理。
四、下载
ExtJS2009-10-2.rar
结束语
关于本章的内容项目的时候研究不多,一般够用就没有再深究,这里比较多的是搜集而来然后进行整理实践再写出来的,难免不全,欢迎大家补充 :) 转载:http://www.cnblogs.com/over140/archive/2009/10/02/1573948.html
【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案 有时候我们可能需要在表单中放置多个按钮,比如表单页面常见的按钮有创建和取消。点击创建按钮会触发单击响应事件,在单击响应事件中进行提交表单,这没有任何问题。点击取消按钮的时候,触发对应的单击响应事件,这个单击响应事件中主要处理关闭表单页面逻辑,所以会关闭页面,这也正常。但是!打开控制台监听请求会发现,它也会提交表单。
表单校验与4种提交方式 表单是一个包含表单元素的区域。表单元素允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单校验是指:用户在html页面的form表单中填写的内容,在向服务器提交之前,需要在前端完成对表单内的数据完整性和正确的格式进行校验,校验不通过不予以提交并给出提示。以避免服务器收到错误数据(导致对服务器的多余访问)。常用于表单的校验业务如下:非空(账号密码)、手机号格式、邮箱格式、密码复杂度。 表单提交的常见操作方式:1、表单中使用submit提交按钮。2、form表单使用onsubmit等等。
忙的时候再一懒、再加上中途没能迅速解决一些问题,所以把文章拖延到了国庆,不过总算是在今天搞定了。这系列文章可能全部完成可能需要继续延后了,有计划继续写视频监控方面的文章,所以尽量合理安排吧 : )
系列
1. ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ]
2. ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ]
3. ExtJs 备忘录(3)—— Form表单(三) [ 数据验证 ]
4. ExtJs 备忘录(4)—— Form表单(四) [ 数据提交 ]
推荐
1. EXTJS FORM技巧一表单不使用AJAX方式提交?
2. 三种Ext提交数据的方法 3. ExtJS表单提交与加载全攻略
版本
Ext 3.0
正文
一、截图和示例共用Ext.FormPanel
1.1 截图
由于本文主要关注的是表单提交的几种方式,所以仅用了一个表单项以便于测试和减少示例代码。
1.2 示例共用Ext.FormPanel
![复制代码](http://common.cnblogs.com/images/copycode.gif)
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
![复制代码](http://common.cnblogs.com/images/copycode.gif)
二、普通方式提交
适合一次操作页面,即提交后跳转到另外一个页面。
前台代码:
![复制代码](http://common.cnblogs.com/images/copycode.gif)
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 param1=abc;
//指定为GET方式时,url中指定的参数将失效,表单项转换成url中的key=value传递给服务端
//例如这里指定为GET的话,url为:submit.aspx?param2=你输入的值
//form.method = GET;//GET、POST
form.submit();
}
}
![复制代码](http://common.cnblogs.com/images/copycode.gif)
后台代码:
![复制代码](http://common.cnblogs.com/images/copycode.gif)
/// 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");
}
![复制代码](http://common.cnblogs.com/images/copycode.gif)
三、Ajax方式提交
3.1 默认方式
客户端代码:
![复制代码](http://common.cnblogs.com/images/copycode.gif)
handler:function(){
form1.getForm().submit({
url:submit.aspx?method=Submit2 param1=abc,
//method:POST,
//waitTitle : "提示",
//waitMsg: Submitting your data
![](http://www.cnblogs.com/Images/dot.gif)
success: function(form, action){
alert(action.response.responseText);
},
failure: function(form, action){
alert(action.result.errormsg);
}
});
}
![复制代码](http://common.cnblogs.com/images/copycode.gif)
![复制代码](http://common.cnblogs.com/images/copycode.gif)
/// 默认方式
/// /summary
public void Submit2()
{
string param1 = Request.QueryString["param1"];
string param2 = Request.Form["param2"];
//必须返回JOSIN形式数据
Response.Write("{success:true}");
Response.End();
}
![复制代码](http://common.cnblogs.com/images/copycode.gif)
a). 服务器端必须返回JSON格式,success返回true则执行success: function(form, action)里面的代码,返回false则执行failure: function(form, action)中的代码。
b). 服务器端必须Response.End();
写测试代码的时候就是因为没有按这个格式返回,一直以为客户端代码是否有问题,耽误了挺多时间。
3.2 通过Ext.data.Connection提交数据
客户端代码:
![复制代码](http://common.cnblogs.com/images/copycode.gif)
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);
}
});
}
![复制代码](http://common.cnblogs.com/images/copycode.gif)
![复制代码](http://common.cnblogs.com/images/copycode.gif)
/// Connect方式
/// /summary
public void Submit3()
{
string param1 = Request.QueryString["param1"];
string param2 = Request.Form["param2"];
Response.Write("ok");
Response.End();
}
![复制代码](http://common.cnblogs.com/images/copycode.gif)
这里就没有限制返回的数据格式了,但仍需要设置Response.End(),所以默认在PageBase里面设置了此代码。
3.3 通过Ext.Ajax提交数据
客户端代码:
![复制代码](http://common.cnblogs.com/images/copycode.gif)
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);
}
}
});
}
![复制代码](http://common.cnblogs.com/images/copycode.gif)
![复制代码](http://common.cnblogs.com/images/copycode.gif)
/// Ajax方式
/// /summary
public void Submit4()
{
string param1 = Request.QueryString["param1"];
string param2 = Request.Form["param2"];
Response.Write("yes");
Response.End();
}
![复制代码](http://common.cnblogs.com/images/copycode.gif)
a). 服务器端处理返回数据后都需要Response.End();
b). 很明显,Ajax的特点之一就是不刷新页面,提高用户体验。
c). 回调分为callback和success+failure两种方式,后面是将前面的拆成2个函数来处理。
四、下载
ExtJS2009-10-2.rar
结束语
关于本章的内容项目的时候研究不多,一般够用就没有再深究,这里比较多的是搜集而来然后进行整理实践再写出来的,难免不全,欢迎大家补充 :) 转载:http://www.cnblogs.com/over140/archive/2009/10/02/1573948.html
【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案 有时候我们可能需要在表单中放置多个按钮,比如表单页面常见的按钮有创建和取消。点击创建按钮会触发单击响应事件,在单击响应事件中进行提交表单,这没有任何问题。点击取消按钮的时候,触发对应的单击响应事件,这个单击响应事件中主要处理关闭表单页面逻辑,所以会关闭页面,这也正常。但是!打开控制台监听请求会发现,它也会提交表单。
表单校验与4种提交方式 表单是一个包含表单元素的区域。表单元素允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单校验是指:用户在html页面的form表单中填写的内容,在向服务器提交之前,需要在前端完成对表单内的数据完整性和正确的格式进行校验,校验不通过不予以提交并给出提示。以避免服务器收到错误数据(导致对服务器的多余访问)。常用于表单的校验业务如下:非空(账号密码)、手机号格式、邮箱格式、密码复杂度。 表单提交的常见操作方式:1、表单中使用submit提交按钮。2、form表单使用onsubmit等等。
相关文章
- C# 模拟提交 Form表单的数据
- Thinkphp学习日记:jQuery_ajax数据提交
- 一条数据的HBase之旅,简明HBase入门教程3:适用场景
- axios POST提交数据的三种请求方式写法
- js表单动态添加数据并提交
- Fiddler进行模拟Post提交json数据,总为null解决方式(转)
- python通过post提交数据的方法
- Access 字段拼接(UPDATE 数据追加)
- 房屋价格数据采集与分析
- python通过post提交数据的方法
- 读书笔记--SQL必知必会03--排序检索数据
- python3以post方式提交数据
- jQuery跨域请求,跨域Post提交数据的方法(.net/SQL技术交流群206656202 入群需注明博客园) - 思...
- 【收藏】spring boot+websocket+echarts 后台推送数据用echarts展示
- 大数据研究常用软件工具与应用场景
- SAP Cloud for Customer客户主数据的地图集成
- Atitit 面试技术点最小化问题法总结 目录 1. Web 前端1 1.1. Jq 常用操作哪些??1 1.2. 查询后如何绑定后端数据到表格2 1.3. 提交后怎么接受表单数据2 2.
- Atitit. 二进制数据ascii表示法,与base64编码解码api 设计标准化总结java php c#.net
- 5W1H(六何分析法)全景洞察大数据
- axios提交post数据
- 005-四种常见的 POST 提交数据方式
- 如何获取前端提交来得json格式数据