小程序模拟请求服务器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

相关文章
|
14天前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
1月前
|
弹性计算 小程序 UED
|
1月前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
1月前
|
缓存 小程序 API
微信小程序网络请求与API调用:实现数据交互
本文深入探讨了微信小程序的网络请求与API调用,涵盖`wx.request`的基本用法、常见场景(如获取数据、提交表单、上传和下载文件)及注意事项(如域名配置、HTTPS协议、超时设置和并发限制)。通过一个简单案例,演示了如何实现小程序与服务器的数据交互。掌握这些技能将帮助你构建功能更丰富的应用。
|
2月前
|
存储 安全 网络安全
服务器感染了.baxia勒索病毒,如何确保数据文件完整恢复?
近年来,勒索病毒如.baxia不断演变,利用漏洞、社交工程等手段加密文件,威胁范围扩大。加密货币的兴起使其支付方式更匿名,追踪困难。技术支持尤为重要,添加技术服务号(shuju315),专业团队提供数据恢复方案。面对复杂解密要求,包括赎金支付、个人信息提供和执行特定操作,需保持冷静并寻求帮助。防御措施包括加强安全意识、定期备份数据、安装杀毒软件、避免未知文件、更新系统及制定应急响应计划。
97 11
|
4月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
106 3
|
5月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
92 22
|
4月前
|
存储 运维 算法
服务器数据恢复—raid6阵列硬盘重组raid5阵列如何恢复raid6阵列数据?
服务器存储数据恢复环境: 存储中有一组由12块硬盘组建的RAID6阵列,上层linux操作系统+EXT3文件系统,该存储划分3个LUN。 服务器存储故障&分析: 存储中RAID6阵列不可用。为了抢救数据,运维人员使用原始RAID中的部分硬盘重新组建RAID并进行了初始化。 初始化开始一段时间后,运维人员察觉到情况有异后强制终止初始化,这个时候初始化已经完成一半以上。数据部分已被不可逆的破坏。
|
5月前
|
存储 数据挖掘
服务器数据恢复—用RAID5阵列中部分盘重建RAID5如何恢复原raid5阵列数据?
服务器数据恢复环境: 一台服务器挂接一台存储,该存储中有一组由5块硬盘组建的RAID5阵列。 服务器故障: 存储raid5阵列中有一块硬盘掉线。由于RAID5的特性,阵列并没有出现问题。工作一段时间后,服务器出现故障,用户方请人维修。维修人员在没有了解故障磁盘阵列环境的情况下,用另外4块硬盘(除去掉线的硬盘)重新创建了一组全新的RAID5阵列并完成数据同步,导致原raid5阵列数据全部丢失。
|
5月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
142 4

热门文章

最新文章