本人初学，在学习做一个IP地址查询的小程序，遇到了wx.request数据渲染的问题，如下图
JS文件：
Page({ /** * 页面的初始数据 */ data: { ip: "", show: false, getdata: {} }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, /** * 获取用户输入 */ ip: function (e) { this.setData({ ip: e.detail.value }) }, /** *用户点击获取数据事件 */ getdata: function (e) { var that = this; wx.showLoading({ title: '加载中', }); var ip = this.data.ip; if (ip == "") { wx.showToast({ title: '输入不合法', icon: 'none', image: '../../images/error.png', duration: 2000 }) return false; } // 请求数据 wx.request({ url: "xxx.xxx.com" + ip , data: { }, header: { 'Content-Type': 'application/json' }, success: function (res) { console.log(JSON.stringify(res)), that.setData({ getdata: res.data }) } }) }}) |
WXML文件：
<!--pages/IP/IP.wxml--><view> <view class="pages-box"> <!-- 提示文字 --> <view class="fs32 fc99"> 请输入您要查询的IP地址 </view> <!-- 搜索框 --> <view class="inp-box"> <input class="inp" bindinput="ip" placeholder="例如：114.14.114.114" placeholder-style="font-size:30rpx"/> <view class="inpimg"> <image src="../../images/search.png" class="pagesimg" /> </view> </view> <!-- 提交按钮 --> <view class="btn-box"> <button class="btn fs32" bindtap="getdata"> 查 询 </button> </view> </view> <!-- 详细信息 --> <view class="det-box {{show?'':'dp-n'}}"> <view class="pg-t fs36 fc99"> 详细信息 </view> <view class="pglist fc99"> <view class="pg-l fs32">区域：</view> <view class="pg-r fs32">{{getdata.area}}</view> </view> </view></view> |
图1URL返回的json数据格式如图3所示，图2是wxml文件，为什么URL返回的json数据没法在页面显示❓
试一试在view里面 改成 getdata[0].area
把所有的this.setData 都改成that.setData
你的数据和function的名字不要一样，date和function都叫getdata，总觉得哪里不对。
以上方法，都分开试一试