微信小程序服务器请求和上传数据，上传图片并展示，提交表单完整实例代码附效果图
微信小程序开发交流qq群 173683895 、 526474645 ；
承接微信小程序开发。扫码加微信。
为了方便大家，下面列出微信请求服务器常用的几种方式，并附上代码和注释。
一： GET请求（最常用的）
wx.request({
url: 'https://URL', //这里''里面填写你的服务器API接口的路径
data: {}, //这里是可以填写服务器需要的参数
method: 'GET', // 声明GET请求
// header: {}, // 设置请求的 header，GET请求可以不填
success: function(res){
console.log("返回成功的数据:" + res.data ) //返回的会是对象，可以用JSON转字符串打印出来方便查看数据
console.log("返回成功的数据:"+ JSON.stringify(res.data)) //这样就可以愉快的看到后台的数据啦
},
fail: function(fail) {
// 这里是失败的回调，取值方法同上,把res改一下就行了
},
complete: function(arr) {
// 这里是请求以后返回的所以信息，请求方法同上，把res改一下就行了
}
})
二：POST请求（我主要用于上传数据的时候用）
基本和GET比较类似，需要注意的两个地方请看注释。
var that = this //创建一个名为that的变量来保存this当前的值
wx.request({
url: '',
method: 'post',
data: {
openid: 'openid' //这里是发送给服务器的参数（参数名：参数值）
},
header: {
'content-type': 'application/x-www-form-urlencoded' //这里注意POST请求content-type是小写，大写会报错
},
success: function (res) {
that.setData({ //这里是修改data的值
test: res.data //test等于服务器返回来的数据
});
console.log(res.data)
}
});
三：表单提交（这种方式也比较常用，方法也比较多样）
上代码, 表单提交很简单。
1.使用GET的方式提交表单：
//index.wxml
//index.js
formSubmit: function (e) {
var that = this;
var formData = e.detail.value; //获取表单所有input的值
wx.request({
url: '',
data: formData,
header: { 'Content-Type': 'application/json' },
success: function (res) {
console.log(res.data)
}
})
},
//2.使用POST的方式提交表单，index.wxml的代码和上面的一样，这里就不重复贴代码了
formSubmit: function (e) {
var adds = e.detail.value;
adds .openid = 11;
wx.request({
url: '',
data: adds,
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {// 设置请求的 header
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(JSON.stringify(res.data))
}
fail: function (res) {
console.log('cuowu' + ':' + res)
}
})
},
//四：上传图片并且把图片展示出来
先贴上效果图：
//这里也很简单，直接上完整代码,
js
var adds = {};
Page({
data: {
img_arr: [],
formdata: '',
},
formSubmit: function (e) {
var id = e.target.id
adds = e.detail.value;
adds.program_id = app.jtappid
adds.openid = app._openid
adds.zx_info_id = this.data.zx_info_id
this.upload()
},
upload: function () {
var that = this
for (var i=0; i < this.data.img_arr.length; i++) {
wx.uploadFile({
url: 'https:***/submit',
filePath: that.data.img_arr[i],
name: 'content',
formData: adds,
success: function (res) {
console.log(res)
if (res) {
wx.showToast({
title: '已提交发布！',
duration: 3000
});
}
}
})
}
this.setData({
formdata: ''
})
},
upimg: function () {
var that = this;
if (this.data.img_arr.length<3){
wx.chooseImage({
sizeType: ['original', 'compressed'],
success: function (res) {
that.setData({
img_arr: that.data.img_arr.concat(res.tempFilePaths)
})
}
})
}else{
wx.showToast({
title: '最多上传三张图片',
icon: 'loading',
duration: 3000
});
}
}, //console出来如下图就证明上传成功了
