AJAX小程序入门
AJAX是什么
- 异步
- 前后端交互
- 在不更新页面的情况下 加载新数据
AJAX流程
- 初始化参数
- 发送请求
- 解析数据 (回调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渲染
}
};
JQuery Ajax
$.get("http://127.0.01:5000/douban", { page: 1 }, function (data) {
console.log(typeof data, data);
});
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);
});
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);
// });
微信小程序
四种文件
- 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