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

一： GET请求（最常用的）  

1. wx.request({

2. url: 'https://URL', //这里''里面填写你的服务器API接口的路径

3. data: {}, //这里是可以填写服务器需要的参数

4. method: 'GET', // 声明GET请求

5. // header: {}, // 设置请求的 header，GET请求可以不填

6. success: function(res){

7. console.log("返回成功的数据:" + res.data ) //返回的会是对象，可以用JSON转字符串打印出来方便查看数据

8. console.log("返回成功的数据:"+ JSON.stringify(res.data)) //这样就可以愉快的看到后台的数据啦

9. },

10. fail: function(fail) {

11. // 这里是失败的回调，取值方法同上,把res改一下就行了

12. },

13. complete: function(arr) {

14. // 这里是请求以后返回的所以信息，请求方法同上，把res改一下就行了

15. }

16. })

二：POST请求（我主要用于上传数据的时候用）  
基本和GET比较类似，需要注意的两个地方请看注释。  

1. var that = this //创建一个名为that的变量来保存this当前的值

2. wx.request({

3. url: '',

4. method: 'post',

5. data: {

6. openid: 'openid' //这里是发送给服务器的参数（参数名：参数值）

7. },

8. header: {

9. 'content-type': 'application/x-www-form-urlencoded' //这里注意POST请求content-type是小写，大写会报错

10. },

11. success: function (res) {

12. that.setData({ //这里是修改data的值

13. test: res.data //test等于服务器返回来的数据

14. });

15. console.log(res.data)

16. }

17. });

三：表单提交（这种方式也比较常用，方法也比较多样）  
上代码, 表单提交很简单。  
1.使用GET的方式提交表单：  
 //index.wxml  

1. <form bindsubmit="formSubmit" bindreset="formReset">

2. <input type="text" class="input-text" name="username" placeholder="请输入账号" />

3. <input type="text" class="input-text" name="password" placeholder="请输入密码" />

4. <button formType="submit">提交</button>

5. </form>  

//index.js  

1. formSubmit: function (e) {

2. var that = this;

3. var formData = e.detail.value; //获取表单所有input的值

4. wx.request({

5. url: '',

6. data: formData,

7. header: { 'Content-Type': 'application/json' },

8. success: function (res) {

9. console.log(res.data)

10. }

11. })

12. },

  
//2.使用POST的方式提交表单，index.wxml的代码和上面的一样，这里就不重复贴代码了  
   

1. formSubmit: function (e) {

2. var adds = e.detail.value;

3.     adds .openid = 11;

4. wx.request({

5. url: '',

6. data: adds,

7. method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

8. header: {// 设置请求的 header

9. 'content-type': 'application/x-www-form-urlencoded'

10. },

11. success: function (res) {

12. console.log(JSON.stringify(res.data))

13. }

14.       fail: function (res) {

15. console.log('cuowu' + ':' + res)

16. }

17. })

18. },

 

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

先贴上效果图：

//这里也很简单，直接上完整代码,  

1. <form bindsubmit="formSubmit" id='2' bindreset="formReset">

2. <input style='display:none' name='program_id' value='{{program_id}}'></input>

3. <view class='caigou_centent'>描述说明(选填)</view>

4. <textarea class='textarea' placeholder="" name="content" value='{{formdata}}' />

5.  

6. <view class="big-logos">

7. <image bindtap="upimg" src='../../images/jia.png'></image>

8. <block wx:for="{{img_arr}}">

9. <view class='logoinfo'>

10. <image src='{{item}}'></image>

11. </view>

12. </block>

13. </view>

14. <button class='btn' formType="submit">发布</button>

15. </form>

js  

1. var adds = {};

2. Page({

3. data: {

4. img_arr: [],

5. formdata: '',

6. },

7. formSubmit: function (e) {

8. var id = e.target.id

9. adds = e.detail.value;

10. adds.program_id = app.jtappid

11. adds.openid = app._openid

12. adds.zx_info_id = this.data.zx_info_id

13. this.upload()

14. },

15.  

16. upload: function () {

17. var that = this

18. for (var i=0; i < this.data.img_arr.length; i++) {

19. wx.uploadFile({

20. url: 'https:***/submit',

21. filePath: that.data.img_arr[i],

22. name: 'content',

23. formData: adds,

24. success: function (res) {

25. console.log(res)

26. if (res) {

27. wx.showToast({

28. title: '已提交发布！',

29. duration: 3000

30. });

31. }

32. }

33. })

34. }

35. this.setData({

36. formdata: ''

37. })

38. },

39. upimg: function () {

40. var that = this;

41. if (this.data.img_arr.length<3){

42. wx.chooseImage({

43. sizeType: ['original', 'compressed'],

44. success: function (res) {

45. that.setData({

46. img_arr: that.data.img_arr.concat(res.tempFilePaths)

47. })

48. }

49. })

50. }else{

51. wx.showToast({

52. title: '最多上传三张图片',

53. icon: 'loading',

54. duration: 3000

55. });

56. }

57. },

//console出来如下图就证明上传成功了