微信小程序(第二十二章)- 表单数据提交
微信小程序(第二十二章)- 表单数据提交问题实现步骤问题什么时候(怎样)提交数据?当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。实现步骤给form组件添加bindsubmit事件,在js里面定义对应的时间函数;给button按钮添加form-type属性,值:sub
·
问题
-
- 什么时候(怎样)提交数据?
-
- 当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
实现步骤
- 给form组件添加bindsubmit事件,在js里面定义对应的时间函数;
- 给button按钮添加form-type属性,值:submit,提交表单
- 在事件函数里获取要提交的数据;
- 需要给input组件添加name属性;
- 通过事件函数的事件对象获取值;
- 后续可以通过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);
},
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)