投稿
  1. 极客之音首页
  2. 前端开发

5小程序的Ajax数据请求

小半 • • 前端开发 • 阅读 197

导读：本篇文章讲解 5小程序的Ajax数据请求，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

1.接口
	Mock服务器开启，只要把图片等所有静态资源文件放在public文件夹下，直接可以通过Mock服务器localhost:3000去找相应的路径
http://localhost:3000/images/0/a.jpg(api/public/images/0/a.jpg)
http://localhost:3000/recommends(db.json --> recommends:[{},{}....])

在这里插入图片描述

2.小程序自带请求方案
	在页面初次渲染完成onload(){}来请求数据(也可以在onReady进行)，onReady会自动执行。
    
  // 接口已写好的情况下
  onLoad: function () {
      // Ajax请求(很像jQuery)
        wx.request({
          url: 'https://m.maoyan.com/ajax/mostExpected?ci=10&limit=10&offset=0&token=&optimus_uuid=43388C403C4911EABDC9998C784A573A4F64A16AA5A34184BADE807E506D749E&optimus_risk_level=71&optimus_code=10',
          data:{

          },
          success:(res)=>{
            console.log(res.data) // res.data 后端真正返回的数据
          }
        })
}
// 会报错，需要将接口加入白名单

3.注意：
(1)如果后端接口已上线：
    <1>小程序没有跨域限制
    <2>为了掩护安全，需要将自己的后台接口加入了白名单
    <3>这个接口必须是https安全协议的接口(比如猫眼，没有跨域限制)

(2)如果使用Mock服务器(模拟)：
如果是开发阶段，后端接口未开发完成，我们可以开启小程序不校验域名这个功能

3.域名加入白名单(猫眼的https接口)
微信小程序平台 --> 开发 --> 开发设置 --> 服务器域名 --> request合法域名 
--> 修改 --> 复制粘贴猫眼的https+域名(https://m.maoyan.com) --> 保存并提交
                           
4.后端接口还没写好，使用Mock服务器模拟
  onLoad: function (options) {
      // Ajax请求(很像jQuery)
      wx.request({
        url: 'http://localhost:3000/recommends',
        data:{

        },
        success:(res)=>{
          console.log(res.data) //res.data 后端真正返回的数据
        }
      })
  }
注意，这时候没法在小程序平台配置白名单，要在详情中配置：
微信开发者工具 --> 详情 --> 本地配置(项目配置可以看到合法域名有哪些) --> 不校验合法域名，web-view(业务域名)、TLS版本以及HTTPS证书(只适用于开发阶段)
开发阶段勾选(不想校验)
生产阶段取消勾选(需要校验)

这样就能拿到数据了！

db.json

{
  "recommends": [
    {
      "id": 1,
      "name": "Thinkpad",
      "url": "/images/0/a.jpg"
    },
    {
      "id": 2,
      "name": "厨卫品类日",
      "url": "/images/0/b.jpg"
    },
    {
      "id": 3,
      "name": "超级品牌日",
      "url": "/images/0/c.jpg"
    },
    {
      "id": 4,
      "name": "一次性口罩",
      "url": "/images/0/d.jpg"
    }
  ],
  "goods": [
    {
      "id": 1,
      "name": "荣耀9X",
      "feature": "麒麟810 4000mAh续航 4800万超清夜拍 6.59英寸升降全面屏 全网通6GB+64GB 魅海蓝",
      "price": 1299,
      "goodcomment": "97%",
      "poster": "/images/1/poster.jpg",
      "slides": [
        "/images/1/detail_1.jpg",
        "/images/1/detail_2.jpg",
        "/images/1/detail_3.jpg"
      ]
    },
    {
      "id": 2,
      "name": "小米（MI） Redmi 8A",
      "feature": "超长续航 震撼大音量 AI人脸解锁",
      "price": 749,
      "goodcomment": "98%",
      "poster": "/images/2/poster.jpg",
      "slides": [
        "/images/2/detail_1.jpg",
        "/images/2/detail_2.jpg",
        "/images/2/detail_3.jpg"
      ]
    },
    {
      "id": 3,
      "name": "三星 Galaxy S20+",
      "feature": "5G(SM-G9860)双模5G 骁龙865 120Hz超感屏 8K视频 游戏手机 12GB+128GB 幻游黑",
      "price": 7999,
      "goodcomment": "98%",
      "poster": "/images/3/poster.jpg",
      "slides": [
        "/images/3/detail_1.jpg",
        "/images/3/detail_2.jpg",
        "/images/3/detail_3.jpg"
      ]
    },
    {
      "id": 4,
      "name": "荣耀20S",
      "feature": "3200万人像超级夜景 4800万超广角AI三摄 麒麟810 全网通版8GB+128GB 蝶羽白",
      "price": 1999,
      "goodcomment": "97%",
      "poster": "/images/4/poster.jpg",
      "slides": [
        "/images/4/detail_1.jpg",
        "/images/4/detail_2.jpg",
        "/images/4/detail_3.jpg"
      ]
    },
    {
      "id": 5,
      "name": "荣耀20青春版",
      "feature": "AMOLED屏幕指纹 4000mAh大电池 20W快充 4800万 手机 6GB+64GB 冰岛幻境",
      "price": 1199,
      "goodcomment": "97%",
      "poster": "/images/5/poster.jpg",
      "slides": [
        "/images/5/detail_1.jpg",
        "/images/5/detail_2.jpg",
        "/images/5/detail_3.jpg"
      ]
    },
    {
      "id": 6,
      "name": "Apple iPhone 11",
      "feature": "爱买不买 贵",
      "price": 5999,
      "goodcomment": "95%",
      "poster": "/images/6/poster.jpg",
      "slides": [
        "/images/6/detail_1.jpg",
        "/images/6/detail_2.jpg",
        "/images/6/detail_3.jpg"
      ]
    },
    {
      "id": 7,
      "name": "vivo U3x",
      "feature": "6GB+64GB 赤茶红 5000mAh大电池 18W双引擎闪充 超广角AI三摄 骁龙665处理器 全网通4G手机",
      "price": 999,
      "goodcomment": "97%",
      "poster": "/images/7/poster.jpg",
      "slides": [
        "/images/7/detail_1.jpg",
        "/images/7/detail_2.jpg",
        "/images/7/detail_3.jpg"
      ]
    },
    {
      "id": 8,
      "name": "荣耀Play3",
      "feature": "6.39英寸魅眼全视屏 4000mAh大电池 真4800万AI三摄 麒麟710F自研芯片 畅玩全网通6GB+64GB 幻夜黑",
      "price": 999,
      "goodcomment": "98%",
      "poster": "/images/8/poster.jpg",
      "slides": [
        "/images/8/detail_1.jpg",
        "/images/8/detail_2.jpg",
        "/images/8/detail_3.jpg"
      ]
    },
    {
      "id": 9,
      "name": "小米（MI） Redmi Note8",
      "feature": "品质小金刚 4800万四摄 骁龙665",
      "price": 899,
      "goodcomment": "97%",
      "poster": "/images/9/poster.jpg",
      "slides": [
        "/images/9/detail_1.jpg",
        "/images/9/detail_2.jpg",
        "/images/9/detail_3.jpg"
      ]
    },
    {
      "id": 10,
      "name": "华为 HUAWEI Mate 30",
      "feature": "5G 麒麟990 4000万超感光徕卡影像双超级快充8GB+128GB亮黑色5G全网通游戏手机",
      "price": 4499,
      "goodcomment": "97%",
      "poster": "/images/10/poster.jpg",
      "slides": [
        "/images/10/detail_1.jpg",
        "/images/10/detail_2.jpg",
        "/images/10/detail_3.jpg"
      ]
    },
    {
      "id": 11,
      "name": "荣耀20 PRO",
      "feature": "4800万全焦段AI四摄 双光学防抖 麒麟980 全网通4G 8GB+128GB 幻夜星河 拍照手机",
      "price": 2499,
      "goodcomment": "95%",
      "poster": "/images/11/poster.jpg",
      "slides": [
        "/images/11/detail_1.jpg",
        "/images/11/detail_2.jpg",
        "/images/11/detail_3.jpg"
      ]
    },
    {
      "id": 12,
      "name": "华为（HUAWEI） nova 5 Pro",
      "feature": "超级夜景/AI四摄/麒麟980",
      "price": 2499,
      "goodcomment": "96%",
      "poster": "/images/12/poster.jpg",
      "slides": [
        "/images/12/detail_1.jpg",
        "/images/12/detail_2.jpg",
        "/images/12/detail_3.jpg"
      ]
    },
    {
      "id": 13,
      "name": "Apple iPhone Xs Max",
      "feature": "面容ID 双卡双待",
      "price": 7299,
      "goodcomment": "97%",
      "poster": "/images/13/poster.jpg",
      "slides": [
        "/images/13/detail_1.jpg",
        "/images/13/detail_2.jpg",
        "/images/13/detail_3.jpg"
      ]
    },
    {
      "id": 14,
      "name": "vivo iQOO Neo 855版",
      "feature": "HDR10显示 骁龙855 大存储",
      "price": 2198,
      "goodcomment": "96%",
      "poster": "/images/14/poster.jpg",
      "slides": [
        "/images/14/detail_1.jpg",
        "/images/14/detail_2.jpg",
        "/images/14/detail_3.jpg"
      ]
    },
    {
      "id": 15,
      "name": "华为 HUAWEI 畅享8e青春",
      "feature": "2GB+32GB全面屏 黑色 全网通版 移动联通电信4G手机 双卡双待",
      "price": 499,
      "goodcomment": "98%",
      "poster": "/images/15/poster.jpg",
      "slides": [
        "/images/15/detail_1.jpg",
        "/images/15/detail_2.jpg",
        "/images/15/detail_3.jpg"
      ]
    },
    {
      "id": 16,
      "name": "海信(Hisense) 阅读手机A5",
      "feature": "5.84英寸护眼水墨屏 墨水屏 电纸书 阅读器 尊享版4GB+64GB(墨玉黑) 全网通4G手机",
      "price": 1499,
      "goodcomment": "95%",
      "poster": "/images/16/poster.jpg",
      "slides": [
        "/images/16/detail_1.jpg",
        "/images/16/detail_2.jpg",
        "/images/16/detail_3.jpg"
      ]
    }
  ],
  "carts": [
    {
      "goodId": 1,
      "number": 2,
      "checked": false,
      "username": "饮冰",
      "id": 1
    }
  ],
  "users": []
}

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/4561.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！