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

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

});

}

},

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180828A1K3R900?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券