问题

1. 什么时候（怎样）提交数据？
1. 当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

实现步骤

给form组件添加bindsubmit事件，在js里面定义对应的时间函数;
给button按钮添加form-type属性，值：submit，提交表单
在事件函数里获取要提交的数据；
1. 需要给input组件添加name属性；
2. 通过事件函数的事件对象获取值；
后续可以通过API发送请求；

代码如下：

<!--定义form组件-->
<form bindsubmit="toLogin"><!--输入框区块--><view id="inputView"><!--文本框--><input type="text" placeholder="手机号/用户名" name="userName"></input><!--密码框--><input type="text" placeholder="密码" password name="userPwd"></input></view><!--按钮区域--><view id="buttonView"><button form-type="submit">登录</button><button>注册</button><view>忘记密码</view></view>
</form>

//登录函数toLogin(e){//获取提交的用户名和密码用变量存储var userName=e.detail.value.userName;var userPwd=e.detail.value.userPwd;console.log("要提交给服务器的用户名和密码是",userName,userPwd);},

微信小程序（第二十二章）- 表单数据提交相关推荐

微信小程序(第十四章) - 信息查询页面的实现
微信小程序(第十四章)- 信息查询页面的实现前言页面标题实现信息框的实现页面结构实现页面样式实现学生到校离校信息查询列表实现页面结构实现页面样式实现正在加载实现页面结构实现页面样 ...
小程序上传视频的php接口处理,微信小程序[第十二篇] -- 上传视频
通过上一篇的学习,我们可以成功将宝宝的照片传到指定相册了,但是可爱的宝宝岂能只有照片,小视频必须同步跟上,莫问题!咱这篇就来一个视频上传的实现. 俺家小核桃镇贴. 服务端其实对于yii2程序而言,如 ...
微信小程序开发(十二)富文本插件wxParse的使用
昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...
微信小程序把玩（二十八）image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
微信小程序把玩（二十六）navigator组件
微信小程序把玩(二十六)navigator组件原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指 ...
stm32l0的停止模式怎么唤醒_探索者 STM32F407 开发板资料连载第二十二章待机唤醒实验
1)实验平台:alientek 阿波罗 STM32F767 开发板 2)摘自<STM32F7 开发指南(HAL 库版)>关注官方微信号公众号,获取更多资料:正点原子第二十二章待机唤醒实 ...
stm32 文件系统dma大小_「正点原子NANO STM32F103开发板资料连载」第二十二章 DMA 实验...
1)实验平台:[正点原子] NANO STM32F103 开发板 2)摘自<正点原子STM32 F1 开发指南(NANO 板-HAL 库版)>关注官方微信号公众号,获取更多资料:正点原子 ...
鸟哥的Linux私房菜(服务器)- 第二十二章、邮件服务器： Postfix
第二十二章.邮件服务器: Postfix 最近更新日期:2011/08/10 在这个邮件服务器的架设中,我们首先谈论 Mail 与 DNS 的重要相关性,然后依序介绍 Mail Server 的相关名 ...
第二十二章 SQL命令 CREATE TRIGGER（二）
文章目录第二十二章 SQL命令 CREATE TRIGGER(二) SQL触发器代码 ObjectScript触发代码字段引用和伪字段引用引用流属性引用SQLComputed属性标签方法调 ...

微信小程序（第二十二章）- 表单数据提交

微信小程序（第二十二章）- 表单数据提交

问题

实现步骤

微信小程序（第二十二章）- 表单数据提交相关推荐

最新文章

热门文章