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

摘要:
1.获取输入框数据wxml中的input上增加bindinput属性,和方法值在js部分定义与之对应的方法,只要在输入的时候,数据就会绑定调用到该方法,存入data属性变量中2.调用get请求发起网络请求调用wx.request发起网络请求3.调用微信Toast接口展示结果4.按钮绑定bindtap属性,当按钮点击的时候会调用对应的方法index.wxml部分˂viewclass="indexIn

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

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

免责声明:文章转载自《[小程序]微信小程序获取input并发送网络请求》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇delphi7连接mysql5一方法1、结构体下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Laravel Ajax的使用

Ajax (异步的 JavaScript 和 XML)是一套运用在客户端用来创建异步Web应用程序的Web开发技术。  在视图文件导入 jQuery 库使用 ajax来发送并从服务器接收数据。  在服务器端,您可以使用 response() 函数发送响应客户端,以及发送JSON格式的响应可以使用 JSON()函数来接收响应的数据。 json()函数语法 j...

最新的一波Vue实战技巧,不用则已,一用惊人

在Vue中,不同的选项有不同的合并策略,比如 data,props,methods是同名属性覆盖合并,其他直接合并,而生命周期钩子函数则是将同名的函数放到一个数组中,在调用的时候依次调用 在Vue中,提供了一个api, Vue.config.optionMergeStrategies,可以通过这个api去自定义选项的合并策略。 在代码中打印 consol...

R语言-基础解析

二、操作基础 %%取余 %/%整数除法 (1)eigen(...)求解方阵的特征值和特征向量 (2)solve(D,A)求解DX=A (3)data<-list(...)取里面的对象data[["列名称"]];data[[下标]];data$列名称 (4)unlist(列表对象)把列表对象转化为向量对象 (5)names(数据框)读取并编辑列的名称...

jQuery插件jTemplates(模板

一 , 简单介绍 它是一个基于jQuery开发的javascript模板引擎。它主要的作用如下: 1. 通过JavaScript获取JSON形式的数据; 2. 获取一个HTML模板,与数据相结合,生成页面HTML。  二 , 快速上手 先来看一个简单的例子: <script type="text/javascript" src="http://t.z...

redux简明学习

前面的话 这几天被redux折腾的够呛,看了很多视频,也看了很多资料。很多时候,感觉好像顿悟了,但实际上只是理解了其中的一个小概念而已。真正去做项目的时候,还是会卡壳。可能是学CSS和Javascript时花的时间太久了,学redux的时候有点浮躁。还有就是redux内容实在是不少,全部都看都理解,好像没什么必要。不看吧,用的时候总是有点力不从心。于是,决...

Linux段管理,BSS段,data段,.rodata段,text段

         近期在解决一个编译问题时,一直在考虑一个问题,那就是Linux下可执行程序执行时内存是什么状态,是依照什么方式分配内存并执行的。查看了一下资料。就此总结一下,众所周知。linux下内存管理是通过虚存管理的,在分配内存是并不是在物理内存开辟了一段空间,而是在使用时才分配的。并且是通过段页式管理。 以上比較废话,開始看看程序执行时内存会是什...