1、相同点:
a)都是使用异步提交的方式;
b)默认都是使用POST方式来提交数据;
2、不同点:
a)Request方法不可以使用waitMsg属性来设置在等待响应过程中显示的信息,而submit方法提交时这个设置是可用的(可以看到效果,而前面说的不可用是指设置了看不到效果);
b)Request方法必须将要提交的参数手动组织好然后作为名为params的参数的值才能提交到服务器,而submit方法会将表单内所有input元素组织好提交;
c)Request方法提交时,回调函数中会传入两个参数(response,option),前者是请求的响应对象,服务器对于请求的响应信息可以通过它的responseText属性得到(也就是
response.reponseText就可以得到服务器返回的字符串),第二个参数是提交的参数对象,一般不需要用到,如果要读取返回的响应信息,要先用Ext.decode方法将其resonseText属性值转换
成json对象才可以读取;如服务器端返回的是一个json格式的字符串:{success:true,msg:'sample'},则客户端要读取这个信息,可以这样:var returnResult = Ext.decode
(response.responseText); alert(returnResult.msg);submit的情况下回调函数参数是(form,action),如果想读取响应信息,只需要访问action对象的result属性就可以了,像上述同样的
返回信息,读取的示例:alert(action.result.msg);不过有一点要注意的是,当网络数据传输失败或信息丢失的情况下,action中可能没能取到服务器返回的消息,也就是说,result不一
定会存在msg属性,如果不经判断就访问,有可能会引发异常;
d)Request方法提交后,无论返回的json结果中success属性是否为true,回调函数都会到success:function()里面执行,所以在这种情况下,必须在success方法体里再到result.success进行
判断以得到真正的执行结果,所以,只有在出现网络错误,连不到服务器或找到响应页面(404)时,failure回调方法才会被执行;而Submit方法在返回的结果中,如果success为true的,就
会自动执行success:function,如果是false,则会执行failure:function了,所以没有必要再在里面判断success是true或false,另,跟request时一样,当出现网络错误或其它未知错误时
,failure:function也会被执行;
备注:造成这种结果的原因不难理解,因为在上面第三点提到,request请求的情况下返回的结果是以字符串的形式获取的,也就是说ext并未到其进行解析,所以它也识别不了里面返回的结
果是成功还是失败,只是把一个字符串带回来了,而submit方法提交时,返回的action.result对象已经将响应信息解析了,它能读取其中的success属性的值,所以能够根据不同的success属
性来执行相应的回调方法)
[原创] Ext.Ajax.request 与formPanel.getForm().submit() success的区别
formPanel提交方式:
Ext.MessageBox.wait('正在提数据, 请稍侯 ...', '提示');
xxxxFormPanel.getForm().submit({
timeout : 60,
success : function(form, action) {
// 业务成功
Ext.MessageBox.updateProgress(1);
Ext.MessageBox.hide();
},
failure : function(form, action) {
// 业务失败
Ext.MessageBox.updateProgress(1);
Ext.MessageBox.hide();
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID :
Ext.Msg.alert('错误!', '存在未通过验证的数据!');
break;
case Ext.form.Action.CONNECT_FAILURE :
Ext.Msg.alert('错误!', '连接错误!');
break;
case Ext.form.Action.SERVER_INVALID :
Ext.Msg.alert('错误!', action.result.msg);
}
}
});
Ajax提交方式:
Ext.Ajax.request({
url : ...,
params : {
...
},
success : function(response, opts) {
var o = Ext.util.JSON.decode(response.responseText);
if( o.success){
// 业务执行成功
} else{
// 业务执行失败
}
},
failure : function(response, opts) {
// ? 此处怎么做,大家可以说说 :oops:
}
});
二者都可以接收服务器端返回的如下json串:
{success:true/false,msg:'xxxx'}
如果success为true,对于formPanel提交方式,程序会进入success回调函数;对于Ajax提交方式,程序也会进入success回调函数。
而区别在于如果success为false,对于formPanel提交方式,程序会进入failure回调函数;而Ajax提交方式,程序依然会进入success回调函数。
总结:
success的true和false可以用来表示业务的成功或者失败。
1、在formPanel提交方式中,成功后的操作要在success回调函数中进行,失败后的操作在failure回调函数中进行;
2、在Ajax提交方式中,业务的成功失败都应该在success回调函数中进行操作,而true或者false以o.success获得(具体见代码及注释)。
分享到:
相关推荐
在EXTJS框架中,`Ext.FormPanel`和`Ext.Ajax.request`提供了两种不同的异步提交方法,它们各自有其特点和适用场景。下面我们将详细探讨这两种方式的区别。 1. **Ext.FormPanel的异步提交** `Ext.FormPanel` 是...
1. `form`:`Ext.FormPanel`是EXT JS中的表单面板,它是一个容器,可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`:`Ext.form.Checkbox`是用于创建复选...
// 查看源代码便知,两种方法是一样的 Ext.form.FormPanel = Ext.FormPanel; // 示例:创建一个简单的FormPanel var form1 = new Ext.form.FormPanel({ width: 350, frame: true, // 圆角和浅蓝色背景 renderTo:...
本文将详细介绍EXTJS中两种主要的前后台数据传递方法:`Ext.Ajax.request` 和 `FormPanel` 的 `getForm().submit()`。 首先,`Ext.Ajax.request` 是EXTJS提供的一个全局Ajax对象,用于发送异步HTTP请求。它的基本...
3. **EXT的Ajax请求**:EXT提供了`Ext.Ajax.request`方法,这是一个独立于表单的AJAX请求方式,适用于不涉及表单的情况。这个方法可以直接向服务器发送GET或POST请求,传递参数,处理响应。例如,代码中展示了如何...
在EXTJS中,Ext.AJAX和Ext.FormPanel是两个核心组件,它们分别用于异步与服务器进行数据交互和构建用户界面表单。本文将详细介绍如何使用这两个组件构建一个完整的登录案例,包括与MySQL数据库的交互。 **1. Ext....
userForm.getForm().submit({ waitMsg: "正在保存,请稍候...", url: "${ctx}/user.do?method=jsonSave&rIdList=" + Ext.getCmp("rIdList").getValue(), success: function(form, action){ if (action.result....
ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例,然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**:首先,定义一个FormPanel,并在其...
1. **创建一个新的类**:定义一个继承自Ext.form.ComboBox的新类,添加必要的配置和方法来支持多选。 2. **配置store**:设置一个数据存储(Store)来保存可选项,确保每个记录都有一个表示选中状态的字段,如`...
在EXTJS中,`Ext.AJAX.Request`方法是进行Ajax通信的基础。其常用参数包括: - `url`: 服务器接口地址。 - `params`: 请求参数,通常为键值对字符串。 - `method`: HTTP请求方法,通常是GET或POST。 - `callback`: ...
EXT框架(通常指的是Ext JS)作为一种成熟且功能丰富的JavaScript库,提供了强大的UI组件和便捷的数据处理方法,其中就包括了异步提交FORM表单的功能。 #### 二、EXT异步提交FORM表单的基本原理与实现 ##### 2.1 ...
**2.16 Form Panel (Ext.FormPanel)** - **xtype**: `form` - **功能描述**:Form Panel 是一个包含表单字段的面板。 - **主要用途**:用于创建和管理表单,支持数据验证和提交。 **2.17 Checkbox (Ext.form....
在上面的代码中,我们可以看到使用了 Ext.Ajax.request 方法来发送 AJAX 请求,检测用户名是否已经存在于数据库中。在服务器端,可以使用数据库查询来检测用户名是否已经存在于数据库中。如果用户名已经存在,则返回...
相比于`form.submit()`,`Ext.Ajax.request()`提供了更多的控制选项,允许开发者手动处理进度条的显示。这种方法适用于更复杂的数据交互场景,尤其是在需要定制化错误处理或数据解析逻辑的情况下。 3. **使用Ext....
Ext Form提供了一种结构化的方式来组织这些字段,并提供了验证、提交和数据绑定等功能。 动态加载表单数据涉及到的主要知识点包括: 1. **JSON数据格式**:JSON(JavaScript Object Notation)是一种轻量级的数据...
在`saveUser_ajaxSubmit3`函数中,首先定义了一个包含用户名和密码字段的表单面板,然后在“确定”按钮的点击事件处理程序中,获取表单的数据,进行验证,然后使用`formPanel.getForm().submit`方法提交表单。...
此外,还可以使用`Ext.lib.Ajax.request`进行异步提交,方法与上述submit类似,只是更底层,可以直接控制请求参数和回调函数。 总之,Ext Form是Ext JS中的强大组件,提供了丰富的功能来创建、验证和提交表单数据。...
在Ext JS中,`Ext.form_load`涉及到的主要知识点是FormPanel的数据加载机制,这包括了对FormPanel的form对象、BasicForm、doAction方法、Ext.form.Action对象以及JsonReader的使用。以下是对这些概念的详细解释: 1...
本文主要总结了EXT表单提交数据的三种常见方法:EXT的form表单AJAX提交、非AJAX提交以及EXT的Ajax类直接提交。 1. EXT的form表单AJAX提交(默认提交方式) EXT的form表单默认采用AJAX方式进行数据提交,这样可以在...