微信小程序开发微信小程序微信小程序

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

2019-04-30  本文已影响1人  Dove言和

在开发微信小程序的过程中,有调用接口的情况,(如果是想找免费接口用来测试或者玩的,可以去免费开放接口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数据 调用接口并循环显示在页面,下一篇文章或者直接点击链接访问~

上一篇 下一篇

猜你喜欢

热点阅读