专栏首页陶士涵的菜地[小程序]微信小程序获取input并发送网络请求

[小程序]微信小程序获取input并发送网络请求

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
            })
          }
        }
    });
  }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [日常] nginx与负载均衡

    =========================================================================

    陶士涵
  • [PHP]实体类基类和序列化__sleep问题

    1.构造函数传参 2.__get和__set实现,当调用不存在的属性的时候,可以取值和赋值到data属性数组 3.__sleep实现,当序列化对象的时候,只序列...

    陶士涵
  • [PHP] 项目实践中使用的IOC容器思想

    1.容器的意思就是一个全局变量,里面存了很多对象,如果要用到某个对象就从里面取,前提就是要先把对象放进去 2.控制反转就是把自己的控制权交给别人 3.这两个结合...

    陶士涵
  • 微信小程序|购物车

    在各种购物平台,购物车都是十分常见的,比如淘宝,美团等等各种应用软件。一般的软件购物车都包含商品图片,名称,价格。购物车其实就是一个物品或商品的简介,直观的反映...

    算法与编程之美
  • Vim as Python IDE on

    从Vim的网站下载vim,建议下Self-installing executable的版本。

    py3study
  • 李理:详解卷积神经网络

    用户1737318
  • 卷积神经网络VGG16这么简单,为什么没人能说清?

    很多人想入门做深度学习,但往往翻遍网络看完一篇又一篇所谓的“入门教程”,paper,包括很多深度学习框架官方给出的案例,给人的感觉真的是从入门到放弃。写教程的作...

    机器学习AI算法工程
  • TensorFlow系列专题(十三): CNN最全原理剖析(续)

    如图1所示,假设输入到神经网络中的是一张大小为256*256的图像,第一层隐藏层的神经元个数为241*241。在只考虑单通道的情况下,全连接神经网络输入层到第一...

    磐创AI
  • [Keras实用技巧]·错误Sequential has no attribution “validation_data”解决

    错误描述:Sequential has no attribution “validation_data”

    小宋是呢
  • Matlab系列之开篇

    在System Generator系列结束的时候,本来的打算是开始记录ZYNQ的学习,但是考虑到ZYNQ并不熟悉,不太好下手,等之后学好了再来吧,前段时间刚好发...

    狂人V

扫码关注云+社区

领取腾讯云代金券