小程序的数据请求
原创
小程序的数据请求，我们可以调用微信的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)...）
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读