The WeChat applet server requests and uploads data, uploads pictures and displays them, submits the form with complete example code with renderings

For the convenience of everyone, the following lists several methods commonly used by WeChat to request the server, and attaches the code and comments.

Those who are interested in WeChat applet can follow me and join my WeChat applet development and exchange qq group (173683895) to exchange and learn from each other.

One: GET request (most commonly used)  

wx.request({  
    url: 'https://URL', //here '' fill in the path of your server API interface  
    data: {}, //Here are the parameters that can be filled in by the server  
    method: 'GET', // declare a GET request  
    // header: {}, // set the header of the request, GET request can be left blank  
    success: function(res){  
console.log("Returned successful data:" + res.data ) //The returned object will be an object, which can be printed out with JSON to string for easy viewing of the data  
console.log("Returned successful data:"+ JSON.stringify(res.data)) //This way you can happily see the data in the background  
    },  
    fail: function(fail) {  
      // Here is the failed callback, the value method is the same as above, just change res  
    },  
    complete: function(arr) {  
      // Here is the information returned after the request, the request method is the same as above, just change the res  
    }  
  })  

Two: POST request (I mainly use it when uploading data)  
is basically similar to GET. Please see the comments for two places that need attention.  

   var that = this //Create a variable named that to hold the current value of this  
   wx.request({  
      url: '',  
      method: 'post',  
      data: {  
        openid: 'openid' //here are the parameters sent to the server (parameter name: parameter value)  
      },  
      header: {  
        'content-type': 'application/x-www-form-urlencoded' //Note here that the content-type of the POST request is lowercase, and uppercase will report an error  
      },  
      success: function (res) {  
        that.setData({ //here is to modify the value of data  
          test: res.data //test is equal to the data returned by the server  
        });  
        console.log(res.data)  
      }  
  });  

Three: Form submission (this method is also more commonly used, and the methods are more diverse)  
, the form submission is very simple.  
1. Submit the form using 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; //Get the value of all the input of the form  
    wx.request({  
      url: '',  
      data: formData,  
      header: { 'Content-Type': 'application/json' },  
      success: function (res) {  
        console.log(res.data)   
      }  
    })  
  },  

  
//2. Use the POST method to submit the form. The code of index.wxml is the same as the above, and the code will not be repeated here.  
   

  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: {// Set the header of the request
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        console.log(JSON.stringify(res.data))
      }
      fail: function (res) {
        console.log('cuowu' + ':' + res)
      }
    })
  },

//four: upload the picture and display the picture  

Paste the renderings first:

//This is also very simple, go directly to the complete code,  

<form bindsubmit="formSubmit" id='2' bindreset="formReset">  
<input style='display:none' name='program_id' value='{{program_id}}'></input>  
      <view class='caigou_centent'>Description (optional)</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: [],  
format: '',  
},  
  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: 'Submitted for publication! ',  
                duration: 3000  
              });  
            }  
          }  
        })  
      }  
      this.setData({  
        format: ''  
      })  
  },  
  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: 'Up to three images can be uploaded',  
        icon: 'loading',  
        duration: 3000  
      });  
    }  
  },  

//The console comes out as shown below to prove that the upload was successful