[小程序]微信小程序获取input并发送网络请求
2023-02-18 15:47:08 时间
1. 获取输入框数据
wxml中的input上增加bindinput属性,和方法值
在js部分定义与之对应的方法,只要在输入的时候,数据就会绑定调用到该方法,存入data属性变量中
2. 调用get请求发起网络请求
调用wx.request发起网络请求
3.调用微信Toast接口展示结果
4.按钮绑定bindtap属性,当按钮点击的时候会调用对应的方法
index.wxml部分
<view class="indexInput"> <input maxlength="100" bindinput="getEmail" placeholder="邮箱地址" /> </view> <view class="indexInput"> <input password maxlength="30" bindinput="getPasswd" placeholder="密码" /> </view> <view class="indexButton"> <button type="primary" bindtap="checkLogin" loading="{{loading}}"> 登录 </button> </view>
index.js部分
//index.js //获取应用实例 const app = getApp() Page({ data: { email:"", passwd:"", }, onLoad: function () { }, //获取输入框数据 getEmail:function(e){ this.setData({ email: e.detail.value }) }, //获取输入框数据 getPasswd: function (e) { this.setData({ passwd: e.detail.value }) }, /* * 验证用户名密码是否正确 */ checkLogin:function(){ var email=this.data.email; var passwd = this.data.passwd; var data={ loginfrom:"app", email: email, psw: passwd, output: "json" }; var url = "https://api.sopans.com/third/login.php"; wx.request({ url: url, method: 'GET', data: data, header: { 'Content-Type': 'application/json' }, success(res) { if(res.data.code=200){ wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) } } }); } })
相关文章
- [android] activity的启动模式
- [android] activity的生命周期
- [android] 在不同的activity之间传递数据
- [android] 隐式意图和显式意图的使用场景
- [android] 隐式意图的配置
- [android] 隐式意图激活另外一个activity
- [android] 显示意图激活另外一个activity
- [android] smartimageview&常见的开源代码
- [android] 上传文件到服务器
- [android] 异步http框架与实现原理
- [android] 采用httpclient提交数据到服务器
- 只需6步,教你从零开发一个签到小程序
- [android] 采用post的方式提交数据
- [android] 采用GET方式提交数据到服务器
- [android] 字符乱码问题的处理
- [android] 网络html查看器
- [android] android消息机制入门
- [android] 网络图片查看器
- [android] 保存联系人到系统通讯录
- [android] 获取系统的联系人信息