小程序--(获取表单数据和请求接口)

前言

最近新入职了新公司,年轻的我本以为逃离了一个后端程序员去写前端的恐惧,但是事与愿违,终究还是来了.
       入职第一天,就来和我讨论让我去获取前端的数据传入后台,原本我以为是我写接口去接收,没想到是我去小程序前端绑定数据,还要调整一样样式,我蒙了.但是,生活所迫,一个小程序前端0基本的后台人员开始了攻克绑数据的难关开始了.

定义数据和获取,入门必要

• 首先在js中的data上定义数据,这一步很重要

• 然后wxml中开始进行input数据的动态获取(也就是随时获取值)

<input bindinput='diseaseNameInput' value="{{type}}"></input>

• 在js中进入一个事件

  // 实时获取input的数据值
diseaseNameInput: function(e) {
 this.setData({
   type: e.detail.value
 })
}

• 以上2步是把数据定义,并动态set数据,保证后面提交获取的数据准确性

     提交请求

• 先获取所有的表单数据或需要的数据

//把数据给到 formObject
var formObject = e.detail.value;

• formObject包含了所有的表单数据或需要的数据,然后开始取值

//例如前面定义的一个值  type
var typeValue = formObject.type

• wx请求接口

    wx.request({
        url: 接口地址(必须是https的),
        method: 'POST', //请求方式
        header: {
          'content-type': 'application/json', // 默认值 
            //有些post请求要用 'content-Type': 'application/x-www-form-urlencoded'
        },
        data: {
           type: typeValue //刚才获取到的数据
        },
        success: function(res) {
          console.log(res.data)
          wx.hideLoading();

          me.setData({
            //返回成功,设置数据
          });
          
           //弹窗事件
          wx.showToast({ 
              title: '保存成功' ,
              icon:'success',
              duration:2000
          })

        }
      })

 

• 测试一下,发现数据获取到了 ... 调试成功

后言

     一个后端程序员为了生活的无奈~~