最近在项目中使用了extjs,在使用过程中发现form的submit提交有些需要注意的地方。
语法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 参数: actionName : String/Object 预定义的操作类型名称, 或者需要执行的Ext.form .Action 的实例。 options : Object (可选) 传递给Ext.form .Action 的配置项。 submit和load操作支持以下列出的所有配置选项,除非有特殊说明(定制的操作也可以接收其他的配置选项): url : String 操作的url (默认为表单的url。) method : String 表单的提交方式(默认为表单的提交方式,如果未指定则为POST) params : String/Object The params to pass (默认值为表单的 baseParams,如果未定义则为none 。) headers : Object 此操作的请求头部信息 (默认值为表单的默认头部信息)(译者注:指HTTP协议头信息。) success : Function 在成功收到响应之后回调的方法。注意:这只是指HTTP请求成功(事务被正确地发送和接收),但是响应的结果仍然可以包含错误数据。方法将会被传递以下参数: form : Ext.form .BasicForm 请求此操作的表单 action : Ext.form .Action Action 类. 可以检查此对象的 result 属性,以执行特定的处理。 failure : Function 当尝试操作失败时回调的方法。注意:这只是HTTP操作失败,意味着服务器返回了HTTP错误状态码。方法将会被传递如下参数: form : Ext.form .BasicForm 请求此操作的表单 action : Ext.form .Action Action 类. 如果发生了一个Ajax错误,错误类型在 failureType 参数中。可以检查此对象的 result 属性,以执行特定的处理。 scope : Object 调用回调函数的作用域 (也就是回调函数的this引用)。 clientValidation : Boolean 只对Submit操作可用。指定是否在最终提交之前调用 isValid 方法来校验表单。设置为false可阻止此操作。 如果不指定,提交之前将进行校验操作。 返回值: BasicForm this
额外的参数可以通过params传递,也可以通过url追加的方式传递
问题 以下是代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 formParan.getForm().submit({ url : 'schudule/cash' , method :'post' , failure: function (){ Ext.Msg.alert("提示","操作失败"); messagestore.reload(); }, success : function (form, action) { Ext.Msg.alert("提示","操作成功"); win.hide(); formParan.getForm().reset (); messagestore.reload(); } }); 后台代码: res.setHeader('Content-Type' , 'application/json;charset=utf-8' ); if (bOperate){ var result = {'operate' :'success' , message':' success'} res.json(result); } else { var result = {' operate':' failure', ' message':' 认证的key错误,请和客服确认key'} res.json(result); }
在测试过程中,后台返回成功的时候,前台一直走不到success中去。debug下看到http的状态码是200,按往常ajax的使用习惯来说应该走到success中去。 但是死活不行。后来才发现,运来extjs中form的submit调用需要后台给前端返回一个success的操作码,通过该操作码是true还是false来决定执行success还是failure代码段。
解决方案 需要修改后台代码,增加success:true/false来给前端区分成功失败的标识。
1 2 3 4 5 6 7 8 9 10 11 12 13 res.setHeader('Content-Type' , 'application/json;charset=utf-8' ); if (bOperate){ var result = {'success' :true , message':' success'} res.json(result); } else { var result = {' success':false, ' message':' 认证的key错误,请和客服确认key'} res.json(result); }