微信小程序服務器請求和上傳數據，上傳圖片並展示，提交表單完整實例代碼附效果圖(轉)

一： 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  
<form bindsubmit="formSubmit" bindreset="formReset">    
 <input type="text" class="input-text" name="username" placeholder="請輸入賬號" />    
         <input type="text" class="input-text" name="password" placeholder="請輸入密碼" />    
         <button formType="submit">提交</button>    
  </form>    
//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的代碼和上面的一樣，這里就不重復貼代碼了  
   
//index.wxss  
.page{  
  background: lavender;  
  height: 1303rpx  
}  
.title {  
  margin-left: 5px;  
  vertical-align: middle;  
  padding: 10rpx 10rpx 10rpx 20rpx;  
  font-size: 35rpx;  
  color: #818a8f;  
}  
.titles {  
  vertical-align: middle;  
  padding: 0rpx 0rpx 0rpx 0rpx;  
  font-size: 35rpx;  
  color: #818a8f;  
}  
.section1 { border: 2px solid #a1a1a1; margin: 10px 10px 15px 5px; height: 60rpx;}.section2 { border: 2px solid #a1a1a1; height: 165rpx; width: 90%; margin: 10px 10px 15px   
5px;}  
.plus { margin: 10px 10px 15px 5px; height: 120rpx; width: 120rpx;}.btn{ background: #b3d4db; margin: 60rpx 5px 5px 5px;} 

 

//四：上傳圖片並且把圖片展示出來  

先貼上效果圖：



//這里也很簡單，直接上完整代碼,  
<form bindsubmit="formSubmit" id='2' bindreset="formReset">  
<input style='display:none' name='program_id' value='{{program_id}}'></input>  
      <view class='caigou_centent'>描述說明(選填)</view>  
      <textarea class='textarea' placeholder="" name="content" value='{{formdata}}' />  
  
      <view class="big-logos">  
        <image bindtap="upimg" src='../../images/jia.png'></image>  
        <block wx:for="{{img_arr}}">  
          <view class='logoinfo'>  
            <image src='{{item}}'></image>  
          </view>  
        </block>  
      </view>  
      <button class='btn' formType="submit">發布</button>  
    </form>  
  
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出來如下圖就證明上傳成功了

 轉自：http://blog.csdn.net/qq_35713752/article/details/77970370