相同点:都属于Ajax提交方式!
不同点:Ext.Ajax.request是Ext.data.connection的一个实例
form1.getForm().submit是BasicForm的一个实现方式
使用上的区别:
1.form1.getForm().submit常用在表单提交的时候,就是说要提交页面数据,比如新增和修改数据页面
2.Ext.Ajax.request常用在根据参数提交的时候,比如删除,我们把页面选中的ID进行遍历,封装在一个Array中,作为一个参数做Ajax的提交
例子:
首先是form1.getForm().submit的例子:
function formSubmit(){
if (form1.getForm().isValid()) {
form1.getForm().submit({
waitTitle : '提示',//标题
waitMsg : '正在提交数据请稍后...',//提示信息
url : 'eidtBooktype.action',
method : 'post',
params : 'booktype',
success : function(form, action) {
var flag=action.result.msg;
window.returnValue='SUCC';
Ext.Msg.alert('提示',flag,function(){
window.close();
});
},
failure : function(form,action) {
var flag=action.result.msg;
Ext.Msg.alert('操作', flag);
}
});
}
}
其次是一个Ext.Ajax.request的例子:
Ext.Ajax.request({
url : 'deleteBooktypes.action',
method : 'post',
params : {delids:deleteids.toString()},
success : function(form,action) {
//alert(response.responseText); //返回的json值的字符串
var respText = Ext.util.JSON.decode(form.responseText); //吧字符串变为json格式
var msg=respText.msg;
Ext.MessageBox.alert('提示',msg,function(){
bookTypeStore.reload();
});
},
failure : function(response,options) {
var respText = Ext.util.JSON.decode(response.responseText); //吧字符串变为json格式
var msg=respText.msg;
Ext.MessageBox.alert('提示',msg,function(){
bookTypeStore.reload();
});
}
});
使用是的区别:
最明显就是success和failure时候function的参数!
Ext.Ajax.request的function(response,options),option非常有用,用response.responseText获得返回参数,注意这个地方的response参数可以换成action
form1.getForm().submit的function(form, action),action很有用,用action.result.msg获得返回值
还有个最明显区别是Ext.Ajax.request不可以用waitMsg,真是Ext的一个败笔呀!!!
==============================================================================================
前置:
后台成功返回字符串:{success:true,msg:'操作成功!'}
后台失败返回字符串:{success:false,errors:'操作失败!'}
当submi提交时,action不存在后台返回下图字符串:
下面所有的action不存在,是指url路径不存在
FormPanel 提交代码如下:
-
var G = new Ext.form.FormPanel({})
-
-
G.getForm().submit({
-
url:wayfoon.MMS.DataPage +'/ext2Upload.action',
-
-
failure:function(form, action){
-
Ext.MessageBox.alert('警告', action.result.errors);
-
},
-
success: function(form, action){
-
Ext.MessageBox.alert('信息', action.result.msg);
-
}
-
});
var G = new Ext.form.FormPanel({}) G.getForm().submit({//客户端的数据提交给服务器 url:wayfoon.MMS.DataPage +'/ext2Upload.action', //waitMsg:"正在提交表单数据,请稍候。。。。。。", failure:function(form, action){ Ext.MessageBox.alert('警告', action.result.errors); }, success: function(form, action){ Ext.MessageBox.alert('信息' action.result.msg);
}
根据后台json 字符串 success的值(ture/false)自动选择failure或者success,也可以捕捉前台错误(走failure流程),比如数据非法而被强制提交时,
后台字符串需要通过action.result 转成json 字符串,供我们按习惯的方法使用,
对于后台异常处理,比如 action不存在,则无能为力,会出JavaScript错误,
错误处,ext-all.js的代码
-
this.decode = function(json) {
-
-
return eval("(" + json + ")")
-
}
this.decode = function(json) { //alert(json); return eval("(" + json + ")") }
原因是无法将上图(如图)的字符串转成json字符串,导致无法判断走哪个流程,而正常情况下,返回的是 {success:true,msg:'操作成功!'}或其他。
试了将上面代码使用try{}catch (){} 还是不能解决JavaScript错误,我们一般可以避免这种后台错误,如果非得解决的话,不知道有没有好的解决方法。
Ext.Ajax.request提交代码如下:
-
Ext.Ajax.request({
-
url:wayfoon.MMS.DataPage+'/cpSMS.action?action=submitSMS',
-
method:'POST',
-
params:'id='+id,
-
success:function(form,action){
-
var obj = Ext.util.JSON.decode(form.responseText);
-
if(obj.success==true)
-
{
-
Ext.Msg.alert('提示',obj.msg);
-
ds.reload();
-
}
-
else
-
{
-
-
Ext.Msg.alert('提示',obj.msg);
-
}
-
},
-
failure:function(form,action){
-
Ext.Msg.alert('警告','系统错误');
-
}
-
});
Ext.Ajax.request({ url:wayfoon.MMS.DataPage+'/cpSMS.action?action=submitSMS', method:'POST', params:'id='+id, success:function(form,action){ var obj = Ext.util.JSON.decode(form.responseText); if(obj.success==true) { Ext.Msg.alert('提示',obj.msg); ds.reload(); } else { //Ext.Msg.alert('提示',obj.errors); Ext.Msg.alert('提示',obj.msg); } }, failure:function(form,action){ Ext.Msg.alert('警告','系统错误'); } });
后台字符串通过Ext.util.JSON.decode 转成json字符串
不能自动根据json字符串success的值来选择流程 ,需要根据obj.success的值来判断走哪个流程
该failure:可以捕捉系统异常,比如,数据未曾提交到后台或action 不存在,此时走failure 流程
在 form中增加
errorReader : new Ext.data.XmlReader({
record : 'field',
success : '@success'
}, ['id', 'msg']),
属性的设置,可以 屏蔽 return eval("(" + json + ")") 引起的错误,因为源码中不会走Ext.decode这个流程,源码如下:
handleResponse : function(response){
if(this.form.errorReader){
var rs = this.form.errorReader.read(response);
var errors = [];
if(rs.records){
for(var i = 0, len = rs.records.length; i < len; i++) {
var r = rs.records;
errors = r.data;
}
}
if(errors.length < 1){
errors = null;
}
return {
success : rs.success,
errors : errors
};
}
return Ext.decode(response.responseText);
}
转载:http://blog.csdn.net/zzxll5566/article/details/6176693
相关推荐
总结,`Ext.FormPanel`的`getForm().submit()`更适合处理基于表单的数据提交,它简化了表单数据的处理和验证,而`Ext.Ajax.request`则提供了更高的灵活性,适用于各种HTTP请求,特别是当需要发送非表单数据或处理...
【EXTJS】Ext.AJAX与FormPanel在登录案例中的应用 EXTJS是一个强大的JavaScript库,主要用于构建富客户端Web应用程序。在EXTJS中,Ext.AJAX和Ext.FormPanel是两个核心组件,它们分别用于异步与服务器进行数据交互和...
本文将详细介绍EXTJS中两种主要的前后台数据传递方法:`Ext.Ajax.request` 和 `FormPanel` 的 `getForm().submit()`。 首先,`Ext.Ajax.request` 是EXTJS提供的一个全局Ajax对象,用于发送异步HTTP请求。它的基本...
form.getForm().submit({ url: 'login.php', method: 'POST', success: function(form, action) { // 登录成功处理 }, failure: function(form, action) { // 登录失败处理 } }); } } } ] }] }); }...
此外,EXTJS的`Ext.Ajax`对象还提供了其他方法,如`request()`、`load()`等,可以用于更复杂的异步通信需求。在实际开发中,开发者可以根据具体场景灵活运用这些功能,创建出高效、用户体验优秀的Web应用。
可以使用`Ext.Ajax.request`或`Ext.form.action.Submit`,设置`method`为`POST`,并使用`params`或`formParams`指定其他非文件数据。 ```javascript var form = this.getForm(); if (form.isValid()) { form....
1. **直接使用Ext.Ajax.request方法** 这是最基础的Ajax提交方式,适用于手动封装请求参数的情况。在`saveUser_ajaxSubmit1`函数中,我们看到直接调用了`Ext.Ajax.request`方法,指定了URL、HTTP方法(POST)以及要...
- 结合`FormData`对象和`Ext.form.Basic`的`getForm().submit()`方法可以实现文件上传。 9. **异步进度** - 如果服务器端支持,可以通过`progress`回调处理上传或下载的进度。 - 需要设置`enableProgress: true`...
通过创建一个`FormPanel`实例,并调用`getForm().submit()`方法,可以轻松实现数据的发送与接收。此方法支持设置请求URL、参数、请求类型(如POST或GET)、成功及失败回调函数等。此外,它还能自动显示一个进度条,...
form.getForm().on('submit', function(form, event) { event.preventDefault(); var fileInput = form.findField('uploadFile').getEl().dom; var file = fileInput.files[0]; // 构建POST数据 var formData ...
formPanel.getForm().submit({ url: 'upload.php', // 服务器端处理文件的URL method: 'POST', enctype: 'multipart/form-data', params: {action: 'upload'}, // 添加额外参数 success: function(form, action...
Ext.Ajax.request({ url: 'download.php', // 获取文件URL的服务器端请求 method: 'GET', success: function (response) { var url = response.responseText; // 假设服务器返回文件的URL downloadFile(url); ...
loginForm.getForm().submit({ url: 'login.asp', method: 'POST', params: { username: loginForm.findField('username').getValue(), password: loginForm.findField('password').getValue() }, success: ...
formPanel.getForm().submit({ url: 'upload.php', // 服务器端接收文件的URL method: 'POST', useDefaultXhrHeader: false, success: function(form, action) { // 处理成功响应 }, failure: function(form,...
form.getForm().submit({ url: 'Upload.ashx', // ASP.NET 处理文件的URL method: 'POST', success: function(form, action) { alert('文件上传成功'); }, failure: function(form, action) { alert('文件...
uploadForm.getForm().on('submit', function(form, event) { event.preventDefault(); var fileInput = Ext.getCmp('fileInput'); var formData = form.getFieldValues(); formData.file = fileInput....
loginForm.getForm().on('submit', function(form, event) { if (!form.isValid()) { event.preventDefault(); // 阻止表单提交,因为有无效字段 } else { // 这里可以添加服务器端验证逻辑,例如使用Ajax发送...
- 同时,示例可能还展示了如何在提交表单后与服务器进行交互,例如使用`Ext.Ajax.request`发送POST或GET请求,以及如何处理服务器返回的数据。 4. **实际应用**: - 页面验证不仅提高了用户体验,还能减少无效的...
在`saveUser_ajaxSubmit1`函数中,EXT JS提供了`Ext.Ajax.request`方法进行异步提交。你需要手动构建要传递的参数,并设置URL、请求方法(如POST或GET)。在`success`和`failure`回调函数中处理服务器响应。 2. **...