阿乐のBlog - aqingya.cn

使用jQuery来发送 AJAX 请求会比较方便使用jQuery 发送get和post请求get和post请求有四个参数： $.get(url,[data],[callback],[type]) url:请求的 URL 地址。 data:请求携带的参数。 callback:载入成功时回调函数。 type:设置返回内容格式，xml,html,script,json,text,_default。 12345678910111213 //发送get请求$('button').eq(0).click(function(){ $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){ console.log(data); },&# ...

jQuery 发送 AJAX 请求

发表于2020-09-03|AJAX|AJAX•jQuery| 条评论

借助于 xhr 的 about() 方法，这样我们就可以在适当的位置去调用它，来取消请求。 1xhr.abort(); 123456789101112//获取元素对象const btns = document.querySelectorAll('button');let xhr = null;btns[0].onclick = function() { xhr = new XMLHttpRequest(); xhr.open("GET", 'http://127.0.0.1:8000/delay'); xhr.send();}// abortbtns[1].onclick = function() { xhr.abort(); // --------------------------------------------} 对它的封装: —–传送门—–

AJAX 手动取消请求

发表于2020-09-03|AJAX|AJAX| 条评论

借助xhr的一些属性和方法：超时设置1xhr.timeout = 2000; 超时回调123xhr.ontimeout = function(){ alert("网络异常, 请稍后重试!!");} 网络异常回调123xhr.onerror = function(){ alert("你的网络似乎出了一些问题!");} 12345678910111213141516171819202122const xhr = new XMLHttpRequest();//超时设置 2s 设置xhr.timeout = 2000;//超时回调xhr.ontimeout = function(){ alert("网络异常, 请稍后重试!!");}//网络异常回调xhr.onerror = function(){ alert("你的网络似乎出了一些问题!");}xhr.open("GET",&# ...

AJAX请求超时与网络处理

发表于2020-09-03|AJAX|AJAX| 条评论

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址，在地址的后面添加一个时间戳，即可避免缓存问题。 1xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now()); 123456789101112const xhr = new XMLHttpRequest();//----------------------------------------------------------------------------------- xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());//---------------------------------------------------- ...

解决AJAX在ie中的缓存问题

发表于2020-09-03|AJAX|AJAX| 条评论

我们请求后端的时候一般返回的是字符串，而我们需要的数据，因此我们在请求到JSON数据的时候需要对他们进行转换。手动转换借助JSON的parse方法。 12345678910111213141516171819202122//发送请求const xhr = new XMLHttpRequest();//初始化xhr.open('GET', 'http://127.0.0.1:8000/json-server');//发送xhr.send();//事件绑定xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { // // console.log(xhr.response); // result.innerHTML = xhr.response; // 1. 手 ...

AJAX 手动和自动将请求的JSON数据进行字符串转换

发表于2020-09-03|AJAX|AJAX| 条评论

让元素在一个坐标系统中变形 12345// 浏览器前缀 -webkit-transform -moz- -ms- -o- 2D转换 translate(x,y) 平移 123transform:translate(100px,100px) // 第二个参数可省略，默认为0transform:translateX(100px) // X轴transform:translateY(100px) // Y轴 rotate(180deg) 旋转 scale(w,h) 缩放 1234transform:scale（2） // 一个参数，等比例缩放 transform:scale(1,2) //宽放大一倍即不变，高度放大两倍transform:scaleX(2)transform:scaleY(2) skew(50deg,50deg) 倾斜 X 是水平方向，Y垂直方向（元素得是块元素） 12//如果第二个参数省略，默认为0transform:skew(50deg,50deg) // x 轴倾斜5 ...

css动画之2D、3D 转换 (transform)

发表于2020-09-02|CSS|CSS| 条评论

animation：keyframe 名称，时间，速度曲线，延迟、播放的次数、direction 1234567891011div{ animation:mymove 5s infinite; }@keyframes mymove { from{ left：10px } to{ left：100px }} 兼容手机端需要加浏览器前缀 12-webkit-animation:@-webkit-keyframes name{} animation-name 设置对象所应用的对象名称 animation-duration 规定完成动画所花费的时间，以秒或毫秒计 animation-timing-function 规定动画的速度曲线 1属性值： linear、ease、ease-in 、ease-out 等 animation-delay 规定在动画开始之前的 animation-i ...

css动画animation

发表于2020-09-02|CSS|CSS| 条评论

允许css 的属性值在一定的时间区间平滑度过，在鼠标单击、获取焦点、被点击或对元素任何改变中触发并圆滑地以动画效果改变css 属性值。 transition transition属性是一个简写属性，用于设置四个过渡属性 12transition: property duration timing-function delay;transition: width 1s ease 2s; transition-property 设置过渡效果的 CSS 属性的名称，比如width、 color 、opacity等属性 transition-property：none | all | property 1transition-property:width transition-duration 检索或设置对象过渡的持续时间，规定完成过渡效果需要花费的时间 1transition-duration:1s transition-timing-function 检索或设置对象中过渡的动画类型 1transition-timing-function:ease ...

css动画之过渡（transition）

发表于2020-09-02|CSS|CSS| 条评论

一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 123.box{ display: flex;} 行内元素也可以使用 Flex 布局。 123.box{ display: inline-flex;} Webkit 内核的浏览器，必须加上-webkit前缀。 1234.box{ display: -webkit-flex; /* Safari */ display: flex;} 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始 ...

发表于2020-09-01|CSS|CSS| 条评论

wxParse是一个微信小程序富文本解析组件。现在小程序里面自带了一个<rich-text>组件也能解析富文本，但是表现不尽人意。所以我还是采用的wxParse来解析富文本的。 wxParse git地址：https://github.com/icindy/wxParse。如下图： 2.在你需要引用这个插件的 wxml 文件中引用 wxParse.wxml12//路径根据你实际情况修改<import src="../../../wxParse/wxParse.wxml"/> 3.在你需要引用这个插件的 wxss 文件中引用 wxParse.wxss12//路径根据你实际情况修改@import "../../../wxParse/wxParse.wxss"; 4.在你需要引用这个插件的 js 文件中引用 wxParse.js12//路径根据你的实际情况更改var WxParse = require('../../../wxParse/wxParse.js'); 5.将你需要解析的内 ...

微信小程序——wxParse使用方法

发表于2020-08-30|微信小程序|微信小程序| 条评论

数据库加载中