收藏
回答

wx.request数据渲染问题请教?

本人初学,在学习做一个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数据没法在页面显示❓

最后一次编辑于  09-26
回答关注问题邀请回答
收藏

1 个回答

  • SKY
    SKY
    09-27
    1. 试一试在view里面 改成 getdata[0].area

    2. 把所有的this.setData 都改成that.setData

    3. 你的数据和function的名字不要一样,date和function都叫getdata,总觉得哪里不对。

    以上方法,都分开试一试

    09-27
    赞同
    回复
问题标签