小程序的数据请求

2018-07-08 14:12:54 浏览数 (1)

小程序的数据请求,我们可以调用微信的wx.request( )

wx.request()的API说明

图片.png图片.png

接下来做个简单的demo,先在.wxml文件下好表单页面

代码语言:txt复制
<view class="common">
 <view class="info_class">
    <label >写一个简单的表单,调用模拟接口</label>
  </view>
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view>
      <label class="label_class"> 请输入信息</label>
      <input name="message" class="height_class" />
      <button form-type="submit" type="primary" bindtap="primary" class="height_class">查询</button>
    </view>
  </form>
  <view id="detail" class="detail_class" wx:if="{{condition}}">
    <view id="hhhh" class="close_class" bindtap="closeDetail">
      <label>x</label>
    </view>
    <view class="info_class">
      <label>{{name}}</label>
    </view>
  </view>
</view>

然后在我们的.js文件写好方法

代码语言:txt复制
//表单提交
  formSubmit: function (e) {
    var that = this;
    wx.request({
      url: 'http://127.0.0.1:8080/demo', //仅为示例,并非真实的接口地址
      data: {
        message: e.detail.value.message
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        console.log(res);
        var data = res.data;
        that.setData({
          condition: true,
          name: '名称:'   data[0].name
        });
      },
      fail: function (err) {
        console.log(err);
      },
      complete: function () {
        that.setData({
          condition: true,
          name: '无论请求成功还是失败,我都会执行。名称:hellow' 
        });
      }

    })
  },

然后我们随便在input框输入一个值,点击查询,我们会发现通过接口交互,可以拿到请求api的对应返回操作结果

图片.png图片.png

success的返回结果说明

图片.png图片.png

补充data 数据说明

最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String 。转换规则如下:

  • 对于 GET 方法的数据,会将数据转换成 query string(encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)
  • 对于 POST 方法且 header'content-type' 为 application/json 的数据,会对数据进行 JSON 序列化
  • 对于 POST 方法且 header'content-type' 为 application/x-www-form-urlencoded 的数据,会将数据转换成 query string (encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)

0 人点赞