微信小程序服务器请求和上传数据，上传图片并展示，提交表单完整实例代码附效果图

一： 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

提交

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)

}

})

},

/四：上传图片并且把图片展示出来

描述说明(选填)

发布

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

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

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

});

}

},