小程序获取input、text、textarea的值提交后台处理

小程序数据提交详解

最新推荐文章于 2025-07-21 11:37:58 发布

编程之艺术

最新推荐文章于 2025-07-21 11:37:58 发布

阅读量1.3w

点赞数 3

CC 4.0 BY-SA版权

文章标签：微信小程序传值小程序input

本文链接：https://blog.youkuaiyun.com/ILV_XJ/article/details/80804860

微信小程序开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在小程序中通过bindinput事件获取用户输入的数据，并利用this.setData()方法将这些数据保存到JS文件中定义的变量里，最后通过wx.request发起请求完成数据提交。

在小程序开发中，会遇到类似于html表单或者ajax提交数据的情况，那么怎么在小程序中把页面数据传入js文件，进行数据的提交了？如下红色的需要注意的地方：

wxml文件如下：

<view class="section clearfix poaR">
      <text class="fL formL colorGreen">设备号</text>
      <input class="fL formRtInput colorGreen" placeholder-class="placeholder" type="text" /> 
      <input class="formL colorGreen deviceNum" name='equipmentData' bindinput='bindEquipmentId'>{{qrData}}</input>
</view>

首先使用bindinput事件获取页面输入的值；

js文件如下：

首先在data里面定义需要使用的数据变量，如下：

Page({
  data: {
    equipmentNumber: 0,
  }
})

然后将页面输入的值赋给上面data里面定义的变量，如下：

bindEquipmentId: function(e){
    this.setData({
      equipmentNumber: e.detail.value
    })
}

通过this.setData()将页面输入的值赋给在js文件里面定义好的变量；

最后进行数据的提交，如下：

submitEquipmentAndUserData: function(e){
    var that = this;
    wx.request({
      url: 'http://192.168.31.206:8088/healthMonitor/equipmentUser/addEquipmentAndUser.htm', //仅为示例，并非真实的接口地址
      data: {
        token: '7b40b56eb2e27195dfcdcc3322312a4eb67229a000000015ea84b8657',
        equipmentNumber: this.data.equipmentNumber
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        that.successRemind();
      }
    })
  }

注意在同一个js文件获取data定义的数据，需要使用this.data获取。

那么，为什么e.detail.value就可以获取到输入的input、text等输入框输入的值了，我们可以将输入对象打印出来看看，如下：

将输入对象打印出来，就可以看到输入的数据在detail下面的value中，故通过e.detail.value获取输入数据。做东西主要是一个方法和工作习惯！