小程序的数据请求,我们可以调用微信的wx.request( )
wx.request()的API说明
接下来做个简单的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的对应返回操作结果
success的返回结果说明
补充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)...)