form表单action传参数

时间: 2023-10-28 16:54:01 浏览: 111

extjs-form组件配置参数详解

### extjs-form组件配置参数详解 #### 一、Ext.form.Action `Ext.form.Action`是ExtJS中的一个类，用于处理表单提交和加载数据的动作。它提供了多种配置选项和属性来控制表单操作的过程。 **配置项** - **success**: 执行成功后的回调函数，该函数接收两个参数：`form`（当前表单）和`action`（当前动作对象）。 - **failure**: 执行失败后的回调函数，同样接收`form`和`action`作为参数。 - **method**: 表单提交的方式，支持`GET`和`POST`两种方式。 - **params**: 传递到请求中的额外参数，可以是键值对的形式。 - **url**: 动作提交的目标URL。 - **waitMsg**: 动作执行时显示的等待信息，用于提升用户体验。 **属性** - **Action.CLIENT_INVALID**: 客户端验证错误常量。 - **Action.CONNECT_FAILURE**: 连接失败错误常量。 - **Action.LOAD_FAILURE**: 加载数据失败，通常是因为服务器返回的数据格式不正确或缺少必要字段。 - **Action.SERVER_INVALID**: 服务器端验证错误。 - **failureType**: 错误类型。 - **result**: 包含一个布尔类型的`success`属性和其他相关信息的对象，例如`{success:true, msg:'ok'}`。 - **type**: 动作类型，可以是`submit`（提交）或`load`（加载）。 **注意事项** - 当动作类型为`submit`时，服务器返回的信息中应包含一个布尔类型的`success`属性和一个可选的`errors`属性。 - 当动作类型为`load`时，服务器返回的信息中应包含一个布尔类型的`success`属性和一个`data`属性。 #### 二、Ext.form.BasicForm `Ext.form.BasicForm`类提供了一个基础表单的功能，支持表单数据的提交、加载以及简单的数据绑定。 **配置项** - **baseParams**: 默认传递到请求中的参数。 - **method**: 提交方式，支持`GET`和`POST`。 - **url**: 默认的提交路径。 - **fileUpload**: 是否启用文件上传功能。 - **timeout**: 动作的超时时间，默认为30秒。 - **trackResetOnLoad**: 是否在加载时清除表单数据。 **方法** - **doAction(String/Object actionName, [Object options])**: 执行预定义的动作。选项包括： - `url`: 动作的提交路径。 - `method`: 提交方式。 - `params`: 额外参数。 - `headers`: HTTP头部信息。 - `success`: 成功后的回调函数。 - `failure`: 失败后的回调函数。 - `clientValidation`: 是否启用客户端验证。 - **clearInvalid()**: 清除所有无效验证信息。 - **findField(String id)**: 根据ID查找表单字段。 - **getValues([Boolean asString])**: 获取表单的值，如果`asString`为`true`则返回字符串形式的值。 - **isDirty()**: 检查表单数据是否被修改过。 - **isValid()**: 执行客户端验证并返回验证结果。 - **load(Object options)**: 执行表单数据加载操作。 - **loadRecord(Record record)**: 从数据记录中加载数据到表单。 - **markInvalid(Array/Object errors)**: 标记字段为无效状态，并给出错误信息。 - **reset()**: 重置表单。 - **setValues(Array/Object values)**: 设置表单字段的值。 - **submit(Object options)**: 提交表单。 - **updateRecord(Record record)**: 更新数据记录中的值。 #### 三、Ext.form.FormPanel `Ext.form.FormPanel`是一个用于展示表单的面板组件，提供了布局和样式设置，以及更高级的交互功能。 **配置项** - **items**: 添加到表单面板的子组件。 - **buttons**: 添加到表单底部的按钮配置数组。 - **buttonAlign**: 按钮的对齐方式，默认为`center`。 - **labelWidth**: 表单标签的宽度。 - **labelAlign**: 表单标签的对齐方式，默认为`left`。 - **labelSeparator**: 字段标签与字段之间的分隔符，默认为`:`。 - **minButtonWidth**: 按钮的最小宽度，默认为75像素。 **方法** - **getForm()**: 返回当前表单实例(`Ext.form.BasicForm`)。 - **load(Object options)**: 加载表单数据。 - **startMonitoring()**: 开始监控表单数据变化。 - **stopMonitoring()**: 停止监控表单数据变化。 #### 四、Ext.form.Field `Ext.form.Field`是所有表单字段的基础类，提供了字段的基本属性和方法。 **配置项** - **name**: 字段名。 - **value**: 字段的初始值。 - **disabled**: 是否禁用字段，默认为`false`。 - **fieldLabel**: 字段标签的描述文字。 - **hideLabel**: 是否隐藏字段标签，默认为`false`。 - **labelSeparator**: 字段标签与字段之间的分隔符，默认为`:`。 - **labelStyle**: 字段标签的CSS样式。 - **inputType**: 输入框的类型，默认为`text`。 - **invalidClass**: 字段无效时的CSS类，默认为`x-form-invalid`。 - **invalidText**: 字段无效时的提示文本。 - **msgTarget**: 错误信息的显示位置，默认为`qtip`。 - **qtip**: 显示一个浮动提示信息。 - **title**: 显示一个浏览器工具提示信息。 - **under**: 在字段下方显示错误信息。通过以上详细介绍，我们可以看到ExtJS为Web开发人员提供了丰富的表单处理功能，不仅涵盖了基本的表单操作，还提供了高级的数据验证和用户交互机制。开发者可以根据自己的需求灵活配置这些选项，构建出高效且用户友好的Web应用界面。

回答: 当我们在form的action后面传递参数时，需要手动指定form的method="post"，否则无法获取到?后面的参数。之前在浏览器地址栏通过url传递参数，也是通过?来实现的，但是在form表单中，默认的method是"get"，它会将表单数据组装成查询字符串，提交到action指定的url，而不会将?后面的参数提交。只有在method="post"的情况下，表单数据和?后面的参数会一起提交给action指定的url。\[1\]所以，如果想要在form表单的action中传递参数，需要使用post方法，并将参数放在表单的input元素中进行提交。\[2\]\[3\] #### 引用[.reference_title] - *1* *3* [Form.action传值问题](https://blog.csdn.net/weixin_30566149/article/details/95486936)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [form表单action传参数_（03）③ HTML 表单详解 | HTML](https://blog.csdn.net/weixin_39915505/article/details/110116083)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

阅读全文

form表单action传参数

相关推荐

HTML表单form使用详解：实例解析

JQuery.form表单提交选项与回调函数解析

js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

form表单action提交的js部分与html部分

SpringMVC中使用bean来接收form表单提交的参数时的注意点

JQuery.form表单提交参数详解.txt

Form表单的action和onSubmit示例介绍

js提交form表单,并传递参数的实现方法

HTML的form表单和django的form表单

漂亮的form表单-漂亮的form表单

Form表单及django的form表单的补充

jQuery中设置form表单中action值的实现方法

使用jquery提交form表单并自定义action的方法

动态设置form表单的action属性的值的简单方法

form表单验证

SpringMVC入门：Form表单处理实战教程

JavaScript Form表单验证基础教程

精细金属掩模板(FMM)行业研究报告 显示技术核心部件FMM材料产业分析与市场应用

【创新未发表】斑马算法ZOA-Kmean-Transformer-LSTM负荷预测Matlab源码 9515期.zip

最新推荐

解决form中action属性后面?传递参数 获取不到的问题

通过button将form表单的数据提交到action层的实例

Java 中 Form表单数据的两种提交方式

使用layui前端框架弹出form表单以及提交的示例

form.submit()不能提交表单的错误原因及解决方法

Angular实现MarcHayek简历展示应用教程

管理建模和仿真的文件

深入剖析：内存溢出背后的原因、预防及应急策略（专家版）

Java中如何对年月日时分秒的日期字符串作如下处理：如何日期分钟介于两个相连的半点之间，就将分钟数调整为前半点

Crossbow Spot最新更新 - 获取Chrome扩展新闻

精细金属掩模板(FMM)行业研究报告显示技术核心部件FMM材料产业分析与市场应用

解决form中action属性后面?传递参数获取不到的问题