微信小程序 用get/post提交form数据 调用接口并循环显

在开发微信小程序的过程中，有调用接口的情况，（如果是想找免费接口用来测试或者玩的，可以去免费开放接口API找免费的API接口）

本篇文章以表单提交 调用天气预报的接口 https://apis.juhe.cn/simpleWeather/query

下面是wxml代码，一个简单的表单提交页面

<view wx:if="{{item == ''}}">

  <form bindsubmit="formSubmit" bindreset="formReset">

    <view class="cu-form-group margin-top">

      <view class='title'>输入要查询的城市名称</view>

      <input class='radius' id='city' name="city"></input>

    </view>

    <view class="padding flex flex-direction">

    <button class='cu-btn bg-red margin-tb-sm lg'formType="submit">提交</button>

    </view>

  </form>

</view>

效果图 

下面是js文件

//定义页面的result_list为空,这里给一个空的数组,下面初始化加载的时候,会去给这个arc_list赋值

  data: {

    result_list:[],

    item :[],

  },

  formSubmit:function(e){

    var obj = this;

    var post = e.detail.value;

    // console.log(e.detail.value);

    //请求接口

  wx.request({

    //这里是你要调用的接口

    url: 'https://apis.juhe.cn/simpleWeather/query',

    header: {

      "Content-Type": "application/x-www-form-urlencoded"

    },

    method: "POST",

    data: {

      //这里是你请求需要发送的参数

      city: post.city,

      key: '***************',//key值需要申请

      },

    success: function (res) {

      //请求成功后的回调

      console.log(res.data.result);

      // var result = res.data.result,

      //赋值

      obj.setData({

        item: res.data.result ,

        // realtime: res.data.result.city.realtime

      })

    },

    fail: function () {

      console.log('提交失败');

    }

  })

},

 下面是调用成功后返回的数据

最后 我们在页面进行简单循环一下 

<view wx:if="{{item != ''}}">

  {{item.city}}

  当日天气：{{item.realtime.info}},此时气温{{item.realtime.temperature}}

  未来5天天气：

  <view wx:for="{{item.future}}" wx:key="navItems2" wx:for-index="index" wx:for-item="f">

  {{f.date}}{{f.weather}}{{f.temperature}}{{f.direct}}

  </view>

</view>

简简单单循环一下，就得到下面效果的页面 

以上就是直接以表单提交调用天气预报的接口 ，如何直接调用接口并循环显示在页面，上一篇文章见或者直接点击链接访问~