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

微信小程序开发交流qq群   173683895  、 526474645 ;

微信小程序服务器请求和上传数据,上传图片并展示,提交表单完整实例代码附效果图_第1张图片   承接微信小程序开发。扫码加微信。

为了方便大家,下面列出微信请求服务器常用的几种方式,并附上代码和注释。

 

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

 

 

//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的代码和上面的一样,这里就不重复贴代码了  
   

  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)
      }
    })
  },

 

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

 

先贴上效果图:

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

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

描述说明(选填)