小程序第三弹 wx.request(OBJECT)方法

输入信息，根据输入信息查询数据，并返回前台
其中有
如何获取input值，
页面标签如何隐藏和显示，
表单的提交方法，
页面代码

<view class="common">
  <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>

样式文件代码

/* pages/test/test.wxss */
.height_class{
    margin-top: 30rpx;
    font-size: 13px;
  }

input{
  background-color: #fff;
  height:2rem;  
}

.common{
  padding: 30rpx;
  background-color: #F6F6F6;
  height: 100%;
  font-family: 微软雅黑;
}

.label_class{
  color:#888;
  font-size: 13px;
  margin-left: 10px;
}

.detail_class{
 font-size: 13px;
 color: #353535;
 margin-top: 30rpx;
 background-color: #fff;
 padding: 15rpx;
}

.info_class{
  margin-top: 20rpx;
}

.close_class{
  text-align: right;
  padding-right: 10px;
  color:#e64340;
}

Js文件代码

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    condition: '',
    name: ''
  },

  //表单提交
  formSubmit: function (e) {
    var that = this;
    wx.request({
      url: 'http://127.0.0.1:8080/test/servlet/Test', //仅为示例，并非真实的接口地址
      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
        });
      }
    })
  },

  closeDetail: function (e) {
    this.setData({
      condition: false
    });

  }

})

小程序第三弹 wx.request(OBJECT)方法

推荐阅读更多精彩内容