小小小竹子-CSDN博客

原创 fetch函数发送ajax请求

fetch函数发送ajax请求小示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body&gt

2020-11-05 14:03:10 209

原创使用axios发送ajax请求

使用axios发送ajax请求小示例(axios基于promise)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <s

2020-11-05 13:32:20 501

原创 jQuery发送Ajax请求

jQuery发送Ajax请求小示例前端发送:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="

2020-11-05 11:31:03 216

原创使用nodemon 修改代码后自动重新启动服务器

nodemon 当代码发生改变并保存时自动重启服务器使用:安装: npm install -g nodemon(基于node 必须保证自己电脑上装了node)启动脚本(服务器) : nodemon server.js(脚本名称)这样在代码更新后就可以自动启动服务器啦...

2020-11-05 08:58:56 323

重复的相同请求会让服务器压力很大,所以在发送请求前,要判断之前有没有过该请求,如果有,则终止上次该请求<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ti

2020-11-04 17:50:18 716

原创 ajax取消发送请求

abort() 方法可以手动取消请求 xhr.abort();小案例,小需求:点击"发送请求"发送请求,点击"取消请求"取消发送请求<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&

2020-11-04 17:42:57 382

原创设置ajax请求超时和网络异常

通过 xhr.timeout 来设置超时时间,然后调用超时回调函数const xhr = new XMLHttpRequest();//设置请求超时时间如果在设置时间内服务端还没有返回数据则提示请求超时xhr.timeout = 2000; // 2秒超时会中断(取消)本次请求//超时回调xhr.ontimeout = function(){ alert("请求超时,请稍后重试...");}//网络异常回调(比如掉线)xhr.onerror = functio

2020-11-04 17:33:36 1328

原创解决ie对ajax请求的结果进行缓存的问题

问题描述: IE浏览器会对ajax请求的结果进行缓存导致下次再发送同样请求的时候得到的数据是IE本地缓存的数据而不是最新数据解决办法: 在请求地址(URL)后面跟上时间戳 : Date.now(), 这样每次请求的url都不一样让每一次发送的请求都是新的请求使得它不走本地缓存而直接去服务器拿数据,保证每次拿到的都是最新数据如何加时间戳: 在路径后面

2020-11-04 16:45:36 251

原创服务端响应 JSON 数据

思想: 服务端: 将数据转为字符串的形式响应: JSON.stringify() 前端: 拿到服务端响应的字符串结果,把它解析为原来的对象形式:JSON.parse()上代码: &nbs

2020-11-04 16:26:58 454

原创 Ajax 发送 post请求案例

需求 :鼠标放在div上的时候向服务端发post请求把响应结果在div中呈现html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ajax post</titl

2020-11-04 14:21:09 556

原创创建ajax发送请求的基本步骤

创建ajax发送请求的基本步骤:get请求://1 创建xhr对象const xhr = new XMLHttpRequest();//2 初始化设置请求方式和url//?a=1&b=2 跟在url后面 ?后面是参数(get请求参数跟在url后面)//xhr.open('get','http://127.0.0.1:8000/server?a=1&b=2');xhr.open('get','http://127.0.0.1:8000/server');//3 发送xhr

2020-11-04 14:09:23 389

原创 Ajax 发送 get 请求案例

Ajax 发送 get 请求案例首先要在服务端配置路由(采用express框架),我自己命名为server.js//1 引入expressconst express = require('express');//2 创建应用对象const app = express();//3 创建路由规则app.get('/server',(request,response)=>{ //设置响应头设置允许跨域 response.setHeader('Access-Control-

2020-11-04 12:01:44 306

原创 express搭建本地服务器的基本使用步骤

express的基本使用ps:基于node,要确保电脑上装了node先在项目的终端中初始化:npm init --yes下载express框架 npm install express然后使用express使用步骤://1 引入expressconst express = require('express');//2 创建应用对象const app = express();//3 创建路由规则(以get请求为例)//request是请求报文,response是响应报

2020-11-04 11:52:55 1400

原创 JSON字符串和对象的相互转化

JSON字符串和对象的相互转化对象---->字符串: JSON.stringify()const data = { name:'tom', age:18}let str = JSON.stringify(data);//将data对象转化为字符串strconsole.log(str);字符串---->对象:JSON.parse()let data = JSON.parse(str);console.log(data);...

2020-11-04 11:45:42 112

原创关于页面不能显示滚轮进行向下浏览的问题

问题描述：做案例时，页面只能显示一页的内容，且不能滚动浏览下面的内容原因：我给body添加了overflow：hidden；解决方法：去掉overflow：hidden；给body添加overflow-y：auto；...

2020-02-22 17:03:04 1238

原创 flex布局子元素常见属性之 align-self 和 order

align-self ：控制子项自己在侧轴上的排列方式，用来给单个子元素设置，会覆盖掉父元素的align-items属性设置。属性值：flex-start（默认）、flex-end、center、eg: &nbsp...

2020-02-20 17:28:58 1336 2

原创 flex布局子元素常见属性之 flex

flex 用来定义子元素分配父元素的剩余空间，用flex来表示占多少份用法： flex：具体数字；（默认是0）例如 flex：1；表示该子元素占用其父元素剩余空间的一份。通...

2020-02-20 16:33:46 2043

原创 flex布局中子元素水平垂直居中的方法

flex布局中如何让子元素水平垂直居中思路：先让子元素在主轴上居中对齐：justify-content: center;再让子元素在侧轴上居中对齐：align-items: center;（单行）或者 align-content: center;（多行）注意：不要忘了给父元素添加display：flex；，这是开启 flex 布局的钥匙举例说明：单行子元素实现水平垂直居中：...

2020-02-18 00:02:44 12045

原创 flex布局父元素属性之flex-flow

flex-flowflex-flow 是 flex-direction 和 flex-wrap 的简写形式 flex-direction: column; /*以列为主轴*/ flex-wrap: wrap; /*换行*/上面两行代码可以简写为： flex-flow: column wrap;...

2020-02-17 23:41:10 1012

原创 align-items 和 align-content的区别

align-items 和 align-content的区别虽然两者都表示设置子元素在侧轴上的排列方式，但： align-items 应用于子元素没有换行（父元素代码中没有flex-wrap：wrap；）的情况下 &n...

2020-02-17 23:32:57 240

原创 flex布局父元素属性之 align-content 子元素在侧轴上的排列方式（多行子元素）

align-contentalign-content：设置多行子元素在侧轴上（默认侧轴为y轴）的排列方式注意：该属性只对父元素中有换行情况的子元素有效，即父元素代码中有“ flex-wrap：wrap；”，才会对子元素有效align-content的属性值：属性值含义flex-start子元素在侧轴的头部开始排列（默认值）flex-end子元素在侧轴的尾部开...

2020-02-17 23:11:44 1037

原创 flex布局父元素属性之 align-items 子元素在侧轴上的排列方式（单项子元素）

align-itemsalign-items ：设置子元素在侧轴上（默认侧轴为y轴）的排列方式align-items的属性值：属性值含义flex-start子元素贴着侧轴的头部排列（默认值）flex-end子元素贴着侧轴的尾部排列center子元素在侧轴上居中对齐stretch拉伸，使得子元素在侧轴方向上与父元素等大具体实例（以侧轴为...

2020-02-17 21:27:33 1268

原创 flex布局父元素属性之 flex-wrap 是否换行

flex-wrapflex-wrap ：是否允许子元素换行。flex-wrap的属性值：属性值含义nowrap不换行（默认值）wrap换行解释说明：默认值为nowrap，不换行，当父元素在主轴上一行（一列）装不下子元素时，将会对子元素进行等比缩放，使子元素能在主轴上一...

2020-02-17 18:18:11 10315

原创 flex布局父元素属性之 justify-content 主轴上子元素的排列方式

父元素属性之 justify-content justify-content：设置主轴上子元素的排列方式justify-content 的属性值如下：属性值含义flex-start从主轴的头部开始排，主轴：x轴左对齐；y轴顶部对齐（默认值）f...

2020-02-17 17:27:13 1531

原创 flex布局父元素属性之 flex-direction 设置主轴的方向

flex布局 flex : flexible box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 flex布局原理：通过给父元素添加flex属性(display：flex；)，来控制子元素的位置和排列方式...

2020-02-17 15:48:54 10010 2

qq_42524153的博客