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

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

View Code

 

//四：上傳圖片而且把圖片展現出來 
 先貼上效果圖： //這裏也很簡單，直接上完整代碼, 
<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出來以下圖就證實上傳成功了

View Code

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