ExtJS中的几种数据提交方式:
1.表单Ajax提交(常用)
表单Ajax提交是我目前用的最多的一种,直接使用form.submit(),它会把form面板上的所有控件的值全部传递后台。Ajax的特点之一就是不刷新页面,提高用户体验。 后台必须返回JSON格式,success返回true则执行success:function(form, action)里面的代码,返回false则执行failure:function(form, action)中的代码。
- var panel222=new Ext.form.FormPanel({
- ……//form属性或配置项
- buttons:[{
- text:'保存',
- handler:function (){
- var aa=stag.getForm();//获取面板
- if(aa.isValid()){//通过验证
- aa.submit({//提交
- url : 'Form/stagingDateAdd.ashx',
- method : 'POST',
- waitTitle : "提示",//等待的标题
- waitMsg : '正在提交数据...',//等待的信息
- success : function(panel,action){
- Ext.Msg.alert('信息','信息提交成功!');
- },
- failure : function(form,action){
- Ext.Msg.alert('信息','信息提交失败!');
- }
- });
- }
- }
- }]
- });
2. 普通Ajax提交
这种提交方式可以设置传递到后台的参数,如果不想把面板上的控件全部传递到后台,就可以用这种提交方式。 需要注意的是,不管后台返回的信息是成功或失败都要执行success:function…,所以要在success方法里面判断一下返回的字符串,如果返回success:true,说明操作成功,返回success:false,说明操作失败。Failure方法是访问不到后台时执行的方法。
- var formBasisContent=new Ext.form.FormPanel({
- ……//form属性或配置项
- buttons:[{
- text:"提交",
- handler:function(){
- varbasicForm=formBasisContent.getForm();
- if(basicForm.isValid()){
- Ext.Ajax.request({
- method:'POST',
- [url='Form/BasisContentAdd.ashx]url:'Form/BasisContentAdd.ashx'[/url],
- params:{ ID:ID },//想要传递到后台的参数
- success:function(response,action){
- var resp=Ext.util.JSON.decode(response.responseText);//获取从后台传递回来的字符串
- if(resp .success==true )
- {//提交成功,成功访问后台
- Ext.Msg.alert("提示","提交成功!");
- }
- else
- Ext.Msg.alert('错误',resp.errors.info);
- },
- failure:function(response,action){ //无法访问后台}
- }]
- });
以上返回函数也可以这样写:
- //指定Ajax请求的回调函数,该函数不管是调用成功或失败,都会执行。
- callback: function(options, success, response) {
- if(success){
- MsgInfo(response.responseText);
- }
- }
3.通过Ext.data.Connection提交数据
这种提交方式在grid中删除行时用到过。此提交方式没有限制返回的数据格式,不过我的项目后台返回的一直都是JSON格式数据,其他格式没有试过。
- var conn=newExt.data.Connection();
- conn.request({
- [url='Form/BasisContentDelete.ashx]url:'Form/BasisContentDelete.ashx'[/url],
- params:{ deleteID_basisContent:basisContentID },//要传递的参数
- method:'POST',
- scope:this,
- callback:function(options,success,response){//回调函数
- if(success )
- {//操作成功}
- else//操作失败
- Ext.Msg.alert("失败","删除失败,请重试!");
- }
- })
以上3种提交方式是我目前做项目时用到过的。下面是查资料时从网上看到的ExtJS提交方式。
4.普通方式提交
适合一次操作页面,即 提交后跳转到另外一个页面。
- var form1= new Ext.FormPanel({
- ……//form属性或配置项
- buttons:[{
- 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();
- }
- }
- }]
- });
5.关于hmtl表单和extJS表单的Ajax提交方式之一
这种方式将为ext的ajax指定一个html表单,使用这种方式,不需要将待传递的参数进行封装(没有params属性,表单全部传递到后台)
- function saveUser_ajaxSubmit2(){
- Ext.Ajax.request({
- url :'user_save.action',
- method : 'post',
- form : 'userForm', // 指定表单
- success : function(response, options){//操作成功
- var o =Ext.util.JSON.decode(response.responseText);//获取后台返回JSON格式数据
- alert(o.msg);
- },
- failure : function() {//操作失败 }
- });
- }
6.关于hmtl表单和extJS表单的Ajax提交方式之二
这种方式将html的表单转化为ext的表单进行异步提交,使用这种方式,需要定义好html的表单(同样不能指定传递参数)
- function saveUser_ajaxSubmit4() {
- newExt.form.BasicForm('userForm').submit( {
- waitTitle : '请稍后...',
- waitMsg : '正在保存用户信息,请稍后...',
- url :'user_save.action',
- method :'post',
- success: function(form, action){
- alert(action.result.msg);
- },
- failure : function(form, action){
- alert(action.result.msg);
- }
- });
- }