AJAX + 小程序入门_小程序ajax请求

AJAX小程序入门

AJAX是什么

• 异步
• 前后端交互
• 在不更新页面的情况下 加载新数据

AJAX流程

1. 初始化参数
2. 发送请求
3. 解析数据 （回调Promise）

四种方式使用Ajax

原生Ajax

    //创建XMLHttpRequest对象
    let xhr = new XMLHttpRequest();
    //初始化请求信息
    xhr.open("post", "http://www.httpbin.org/post");
    // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-Type", "application/json");
    //发送请求
    // xhr.send("page=5&type=1");
    xhr.send(JSON.stringify({ page: 1, type: 2 }));
    //绑定事件 判断是否请求成功
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
        //提取IP信息
        //json字符串 --->js对象
        let temp = JSON.parse(xhr.responseText);
        console.log("ip地址", temp.origin);
        //DOM渲染
      }
    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

JQuery Ajax

$.get("http://127.0.01:5000/douban", { page: 1 }, function (data) {
        console.log(typeof data, data);
      });
1
2
3

Fetch(浏览器厂商自己定义)

fetch("http://www.httpbin.org/post", {
        method: "post", //方法
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        }, //请求头
        body: "page=1&type=2", //数据  请求体
      })
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          console.log(data);
        });
1
2
3
4
5
6
7
8
9
10
11
12
13

Axios

// axios.get("http://127.0.01:5000/douban?page=1").then((Response) => {
    //   console.log(Response.data);
    // });
    //同源策略问题
    // axios.get("http://192.168.18.7:5000/douban?page=1").then((Response) => {
    //   console.log(Response.data);
    // });
    axios
      .get(
        "https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98&productId=100009044581&score=0&sortType=5&page=1&pageSize=10&isShadowSku=0&rid=0&fold=1"
      )
      .then((Response) => {
        console.log(Response.data);
      });

    // axios.post("http://www.httpbin.org/post", { page: 1 }).then((Response) => {
    //   console.log(Response.data);
    // });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

微信小程序

四种文件

• wxml – html
  组件换名字 增加一些集成功能组件（swiper轮播图）
• wxss – css
  选择器部分支持 rpx替换px
• js – js
  页面生命周期 小程序生命周期 事件 wx_api
• json – 无
  小程序全局配置 页面的配置

常用组件

view – div
text – p span
input – input
image – img
navigator – a
button --button
scroll-view – 无
swiper+swiper-item – 无

模板语法

数据绑定
{{data}}
条件渲染
wx:if wx:elif wx:else
循环渲染
wx:for=“{{arr}}” 默认的两个变量 item index
模板渲染
template

API

数据处理

• this.data 获取绑定数据
• this.setData() 修改绑定数据

小程序的Ajax

• wx:request

页面跳转

• wx.switchTab
• wx.reLanuch
• wx.redirectTo
• wx.navigateTo
• wx.navigateBack

修改配置

• wx.setNavigationBarTitle