小程序模拟请求服务器json数据

简介: 小程序模拟请求服务器json数据

上一篇

小程序模拟调用本地json接口数据

那么,怎么请求服务器json数据?

如果你是一枚前端,不会写后端接口的话

又想测试数据,看自己写的效果的时候

不要慌

那么,把你的json放在服务器底下

模拟请求服务器json数据即可

步骤:

1:先写好json数据放在桌面备用

[
  {
    "id": 1
  },
  {
    "id": 2
  },
  {
    "id": 3
  },
  {
    "id": 4
  }
]

2:下载一个FileZilla,这款工具在我看来比其他任何一款FTP软件都要简单方便,快捷有效。

3:下载安装好之后,打开FileZilla

填写服务器主机,用户名和密码,端口号,链接到服务器

4:找到服务器配置所在的位置,打开文件夹,将json文件拖进去

5:打开你的域名,添加/index.json,直到在你的服务器里面可以访问到json,就可以了,效果如下:

6:写好wxml:

   <view wx:for="{{list}}" wx:key="list">
      <view class='item-container'>{{item.id}}</view>
    </view>

7:写好wxss

.item-container{
 border: 5px solid #ffffff;
  height: 110rpx;
  line-height: 110rpx;
  margin-bottom:4rpx;
  text-align: center; 
  background: #f6c8fb;
  color: #ffffff;
}

8:js

Page({
  data: {
  },
  onLoad: function () {
    var that = this
    wx.request({
      url: 'http://pig.intmote.com/index.json',
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        //将获取到的json数据,存在名字叫list的这个数组中
        that.setData({
          list: res.data,
          //res代表success函数的事件对,data是固定的,list是数组
        })
      }
    })
  }
})

9:效果如下:

10:有一个小bug

相关文章
|
4天前
|
存储 安全 PHP
通过eXtplorer+cpolar,搭建个人云存储并实现访问内网服务器数据
通过eXtplorer+cpolar,搭建个人云存储并实现访问内网服务器数据
20 0
|
2月前
|
存储 弹性计算 安全
ECS技术专家教你如何保证业务数据全流程安全
本文内容整理自【弹性计算技术公开课——ECS安全季】中阿里云弹性计算技术专家陈怀可带来的课程《如何保证业务数据的全流程安全》。
|
2月前
|
网络协议 Linux C++
Linux C/C++ 开发(学习笔记十一 ):TCP服务器(并发网络网络编程 一请求一线程)
Linux C/C++ 开发(学习笔记十一 ):TCP服务器(并发网络网络编程 一请求一线程)
27 0
|
2月前
|
数据挖掘 Windows
【服务器数据恢复】服务器迁移数据时数据丢失的数据恢复案例
一台安装Windows操作系统的服务器。工作人员在迁移该服务器中数据时突然无法读取数据,服务器管理界面出现报错。经过检查发现服务器中一个lun的数据丢失。
|
2月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
52 1
|
12天前
|
数据采集 JSON Java
HttpClient:HTTP GET请求的服务器响应输出
HttpClient:HTTP GET请求的服务器响应输出
|
2月前
|
存储 数据挖掘 数据库
服务器RAID0:提高数据传输速度 (服务器raid0作用)与RAID1的区别
服务器RAID0:提高数据传输速度 (服务器raid0作用)与RAID1的区别
|
2月前
|
数据采集 编解码 图形学
Android平台Unity下如何通过WebCamTexture采集摄像头数据并推送至RTMP服务器或轻量级RTSP服务
Android平台Unity下如何通过WebCamTexture采集摄像头数据并推送至RTMP服务器或轻量级RTSP服务
|
2月前
|
移动开发 自然语言处理 网络协议
Http解析实现/服务器Get请求的实现
Http解析实现/服务器Get请求的实现
31 0
|
2月前
|
Go
golang力扣leetcode 1606.找到处理最多请求的服务器
golang力扣leetcode 1606.找到处理最多请求的服务器
14 0

热门文章

最新文章

相关产品

  • 云迁移中心