专栏首页小程序的道路小程序的数据请求
原创

小程序的数据请求

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

wx.request()的API说明

图片.png

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

<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文件写好方法

//表单提交
  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

success的返回结果说明

图片.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)...)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序布局

    开始我们的入门后,接下来就可以开始创建我们的第一个demo页面了。按照官网的步骤,在pages模块下新建我们自己的模块demo,添加好对应的文件,然后在app....

    用户2305175
  • 小程序事件

    当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数,跳转到demo页面。然后在对应的js中写出事件的具体实现方法

    用户2305175
  • 小程序渲染

    在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。通过遍历数据,将数据展示,类似vue中的 v-for。 wx:for-...

    用户2305175
  • 实现多模交互融合的四个阶段

    多模交互融合是普适计算和自然交互中最重要的组成部分。笔者认为,实现完整的多模交互融合需要分成四个阶段,分别为独立工作阶段、初步融合阶段、语义理解阶段和任务自适应...

    mixlab
  • [编程经验] 基于bs4的拉勾网AI相关工作爬虫实现

    年初大家可能是各种跳槽吧,看着自己身边的人也是一个个的要走了,其实是有一点伤感的。人各有志吧,不多评论。这篇文章主要是我如何抓取拉勾上面AI相关的职位数据,其实...

    用户1622570
  • 走起,带你操纵数据

    本文讲述的是基于Oracle Linux 5 update 2下 Oracle 11g 数据库的数据操纵语言(DML),Linux系统是由VMWare虚拟机创建...

    DataScience
  • Newbe.Claptrap 框架入门,第一步 —— 创建项目,实现简易购物车

    让我们来实现一个简单的 “电商购物车” 需求来了解一下如何使用 Newbe.Claptrap 进行开发。

    newbe36524
  • 周末荐读 |数据挖掘导论

    一周一读 ? >>>> 作者简介 (美)Pang-Ning Tan / Michael Steinbach /Vipin Kumar Pang-Ning Ta...

    小莹莹
  • Hbase 学习(六) 配置文件调优

    这部分的内容,网上多了去了,都大同小异的,仅作为备忘录,省得需要的时候又要到处查。 1.zookeeper.session.timeout 默认3分钟,...

    岑玉海
  • C++核心准则C.67:多态类应该抑制拷贝

    C.67: A polymorphic class should suppress copying(C.67:多态类应该抑制拷贝)

    面向对象思考

扫码关注云+社区

领取腾讯云代金券