课程简介
在上一课中，我们学习了如何创建和设置表单的基本元素。本课程将指导你如何给登录表单增加交互功能，使其能够响应用户的操作，以便在低代码开发中更灵活地控制表单的行为。
前提条件
在开始本课程之前，请确保你已经完成了表单基本元素的设置，并且有一个“登录”按钮。
教程步骤
- 打开源码:
打开多八多应用市场中上一课的应用源码，找到登录表单。 - 设置表单项名称:
你会发现一个“登录”按钮，但是现在点击它没有任何反应。这是因为我们还没有给表单设置一个事件接收。通过这个事件接收，会返回表单的数据。在设置之前，我们需要给这些表单项增加“name”，也就是它们的字段名。
- 在大纲视图中直接右键编辑，或者双击。
- 在界面上右键然后编辑。
- 将用户名字段指定为“用户名”，密码字段指定为“密码”。
- 创建事件处理函数:
- 在前台函数这里创建一个新的JS函数，叫做“登录处理”。
- 绑定事件:
- 在表单这里添加这个函数的调用。
- 选择“调用函数”，把刚才创建的JS函数传递给这个表单的提交事件。
- 编辑事件处理函数:
- 在“登录处理”中，先放一个消息提示，比如“设置成功”。
- 然后开始和结束连线。现在默认的情况下是成功的，但是信息是空的。
- 测试表单:
- 尝试进行登录操作。当点击登录按钮时，相应的提示信息已经能够正常显示。
- 传递表单数据:
- 将表单数据传递出去。在这里，我们选择将消息内容转化成一个参数，这个参数可以通过函数的形式进行传递。
- 为了能在前台看到这个参数，我们将其转换为json字符串。
- 测试数据传递:
- 在用户名这一栏输入admin，密码输入123123。当点击登录时，你应该能看到用户名为admin，密码为123123的显示结果。
课程回顾
- 设置了登录按钮的类型为submit，即提交类型。
- 为这两个表单项设置了各自的字段名称，分别是用户名和密码。
- 新建了一个名为登录处理的js函数，其中包含了一个显示成功消息的流程，并将这个参数通过json.stringify转换为字符串形式。
- 在表单中添加了这个函数的引用，并将其传给了表单的提交处理回调函数。
下一步计划
在第三课中，你将学习如何连接后端服务，真正实现前后端数据交互。
教学总结
利用多八多AI应用开发助手提供的各种可视化组件和流程图生成代码功能，只需几步操作就可以实现表单交互和事件触发。