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

?

轉載于:https://www.cnblogs.com/taoshihan/p/11421426.html

總結

以上是生活随笔為你收集整理的[小程序]微信小程序获取input并发送网络请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。