前言
最近新入职了新公司,年轻的我本以为逃离了一个后端程序员去写前端的恐惧,但是事与愿违,终究还是来了.
入职第一天,就来和我讨论让我去获取前端的数据传入后台,原本我以为是我写接口去接收,没想到是我去小程序前端绑定数据,还要调整一样样式,我蒙了.但是,生活所迫,一个小程序前端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
})
}
})
-
测试一下,发现数据获取到了 ... 调试成功
后言
一个后端程序员为了生活的无奈~~