微信小程序调用接口并循环显示在页面

版权声明：本文为博主原创文章，未经博主允许不得镜像、转载。 https://blog.csdn.net/qq_21041889/article/details/89642509

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

---

本篇文章 调用的接口是笑话大全  https://v.juhe.cn/joke/content/list.php

下面是pages/index/index.js的代码 

    //请求接口
    wx.request({
      //这里是你用到的接口
      url: 'https://v.juhe.cn/joke/content/list.php',
      data: {
        //这里是你请求需要发送的数据
        key: '**************',//key值需要申请
        page: '2',
        pagesize: '3',
        sort: 'asc',
        time: '1418745237',
      },
      success: function (res) {
        //请求成功后的回调
        console.log(res.data.result.data)// 服务器回包信息
        if(res.statusCode == '200'){
          // 赋值
          obj.setData({
            result_list: res.data.result.data,
          })
        }else{
          console.log("获取失败");
        }
      }
    })

接口返回的值

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

<view wx:for="{{result_list}}" wx:key="navItems" wx:for-index="index" wx:for-item="item">
{{index+1}}、{{item.content}}
</view>

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

以上是直接请求接口，如何用get/post提交form数据 调用接口并循环显示在页面，下一篇文章或者直接点击链接访问~