Extjs之表单提交

Extjs的三种提交方式:

表单Ajax提交,普通提交,单独Ajax提交;

  1. 表单Ajax提交(默认提交方式)

提交函数:当按下表单中的提交按钮时执行下面的 btn函数,按照表单的 name进行提交。

根据后台返回值不同回调success或者failure函数(与单独ajax提交不同)。

如果返回outputResult("{success:true}"),调用success函数,

如果返回outputResult("{success:false,reason:‘"+e.getCause()+"‘}");则调用failure函数

function btn(){

form.getForm.submit({

method:‘POSt‘,

params:{},

url:"",

success:function(form,action){

//Ext.Msg.alert(‘信息’,”提示:”+”response.responseText”);//加粗体是得到后台的具体返回信息。

Ext.Msg.alert(‘提示’,”数据修改成功”);// 成功提示信息

store.load(); // 重新加载数据

},

failure:function(form,action){

Ext.Msg.alert(‘提示‘,‘跳转失败‘);

}

});

}

2.普通提交:按照表单中的name提交。

Form. = new Ext.FormPanel({

……..// form的属性

submit:function(){

this.getEl().dom.action =’url’;// 提交的url

this.getEl().dom.method = ‘post’;

this.getEl().dom.submit();

},

});

当按提交按钮时,执行下面函数:

function btn (){

Form.form.submit();

}

3.extjs的普通ajax提交:

当按下提交按钮是执行次函数:(注意:不能对form表单提交,也就是说也不能按form中的表单的name提交,只能提交params中的参数。只要能够提交到后台不管数据能否正确执行就回调success函数,如果网络有故障,或者页面有错误数据到不了后台,就执行failure函数。

后台返回值的形式:【如果数据处理成功返回outputResult(“{success:true,’……..’}”)。如果数据处理失败返回:outputResult(“{success:false,reason:’”+e.getCause() +”‘}”);】

我们一般要求是:数据处理成功后显示成功信息,失败后显示失败信息。

但是这种提交不管返回什么值,都会执行success函数。所以不能满足我们的要求。为了解决这个矛盾我们有一下方法:

我们在js页面中的success函数中取得返回值,我们对返回值进行判断,如果success是true我门就打印成功信息,如果success是false我们就打印失败的提示。

取得返回值:var responseArray = Ext.util.JSON.decode(response.responseText); 判断如下:

function btn(){

…..// 定义url,也可以在方法外面

Ext.Ajax.request({

url:url,// 要跳转的url,此为属性必须要有

method:’post’,

params:{}, // 提交参数

success: function(response, options)

{

var responseArray = Ext.util.JSON.decode(response.responseText);

if(responseArray.success==true)

{

Ext.example.msg(‘提示’, ‘数据保存成功’);

}

else{

Ext.Msg.alert(‘错误’, responseArray.reason);

}

}

failure:function(response,options)

{

Ext.Msg.alert(‘警告’,”数据处理错误原因\”+response.responseText);

}

});

}

json数据格式

{"success":"true","data":{"id":"49","name":"12344553252","description":"adffafdadf"}}

格式很重要,格式正确才能够在form里面读出来。

时间: 2024-11-10 08:08:06

Extjs之表单提交的相关文章

【ExtJs】ExtJs的表单插件与表单布局、提交与验证

利用ExtJs的Anchor可以为ExtJs自带的表单Form各个组件进行布局,当然,使用<[ExtJs]带日期组件的文本输入框.容器与Ext.Msg.alert告警框告警两次>(点击打开链接)中的vbox也是可以的.其实ExtJs的表单插件与表单布局并不是关键,ExtJs的表单验证还好,就几行语句就能够完成.关键是ExtJs的表单提交必须通过Ajax方式,而在后台必须传回一个Json完成表单的提交,可能有点复杂,下面就以php作为ExtJs的后台处理来说明问题ExtJs的表单.aspx,js

EXTJS 表单提交

EXTJS框架中,在提交表单时,可有3种方式: 方法一: 普通的 Form 提交方式, 主要使用 form.submit() 方法来将表单提交到后台,在后台是根据表单的 name 属性来获取表单中元素的值 ,代码如下: 1 Ext.onReady(function () { 2 var formPanel = new Ext.create({ 3 xtype: 'form', 4 id: 'multiColumnForm', 5 collapsible: false, 6 frame: true

Extjs 表单提交送给新手

Extjs的三种提交方式: 表单Ajax提交,普通提交,单独Ajax提交: 1.表单ajax提交(默认提交方式) 提交函数:当按下表单中的提交按钮时执行下面的btn函数,按照表单的name进行提交.提交数据后根据后台的返回值不同来回调success或者failure函数(和单独ajax的提交不同),后台返回值的形式:[如果返回outputResult(“{success:true}”),则调用success的函数.如果返回:outputResult(“{success:false,reason:

extjs中form表单提交成功、失败的响应信息

类Ext.form.Action.Submit 处理表单Form数据和返回的response对象的类. 该类的实例仅在表单Form{@link Ext.form.BasicForm#submit 提交}的时候创建. 返回的数据包必须包含一个 boolean 类型的success属性,还有可选地,一个含有无效字段的错误信息的属性 A response packet may contain: ·        success property : Boolean - required. ·     

ExtJS 4 表单

Form Panel表单面板就是普通面板Panel增加了表单处理能力.表单面板可以用在任何需要收集用户提交数据的地方.表单面板可以使用Container Layout提供的最简单的拜访表单控件的方式.表单面板可以和Model绑定,以方便加载和保存数据.其实表单面板包裹了Basic Form组件,Basic Form负责处理所有表单控件的管理,校验,提交和加载数据.这意味着所有Basic Form能接收的配置选项,都可以直接在表单面板上使用. Basic Form Panel 开始我们演示一个可以

Extjs form 表单的 submit

说明:extjs form表单的提交方式是多种多样的,本文只是介绍其中的一种方法,本文介绍的方法可能不是完美的,但是对于一般的应用应该是没有问题的.     本文包括的主要内容有:form面板设计.form字段值的获取.后台处理代码以及返回数据的获取 1.form表单设计 var panelItem = Ext.create('Ext.form.Panel', { border: false, id:'formMain', layout: 'form', items: [ { xtype: 'f

Ajax表单提交

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields() 和 resetForm()等.

struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($("#textValue").val() == "") {3                 $("#errortip").html("<font color='#FF0000'>请输入查询内容</font>")

表单提交时如何将错误信息传递到页面中,并且保存原来提交数据

曾经何时,你还有我或许都在困惑,如何方便的将验证不通过的表单信息再返回到前台页面,例如我注册一个账号,辛辛苦苦填写了N多项,一个格式验证没有通过,一切都需要充填,虽然Ajax可以解决这个问题,但是我们总不能把所有表单提交都弄成ajax,更何况有若干人就是没事把javascript给禁止了.哎哎,好了解决方案来了,下面以用户登录为例,说说我的解决方案. 服务器端用nodejs实现: login.html 简单的提交表单 <form action="" id="loginF