初学者的成长日记
关注
分享
扫一扫
小小小竹子
这个作者很懒，什么都没留下…
展开
-
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>原创 2020-11-05 14:03:10 · 257 阅读 · 0 评论 -
使用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 · 548 阅读 · 0 评论 -
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 · 267 阅读 · 0 评论 -
使用nodemon 修改代码后自动重新启动服务器
nodemon 当代码发生改变 并保存时 自动重启服务器使用:安装: npm install -g nodemon(基于node 必须保证自己电脑上装了node)启动脚本(服务器) : nodemon server.js(脚本名称)这样在代码更新后就可以自动启动服务器啦...原创 2020-11-05 08:58:56 · 379 阅读 · 0 评论 -
解决ajax重复发送相同请求的问题
重复的相同请求会让服务器压力很大,所以在发送请求前,要判断之前有没有过该请求,如果有,则终止上次该请求<!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 · 780 阅读 · 0 评论 -
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 · 411 阅读 · 0 评论 -
设置ajax请求超时和网络异常
通过 xhr.timeout 来设置超时时间,然后调用超时回调函数const xhr = new XMLHttpRequest();//设置请求超时时间 如果在设置时间内 服务端还没有返回数据 则提示请求超时xhr.timeout = 2000; // 2秒超时 会中断(取消)本次请求//超时回调xhr.ontimeout = function(){ alert("请求超时,请稍后重试...");}//网络异常回调(比如掉线)xhr.onerror = functio原创 2020-11-04 17:33:36 · 1424 阅读 · 0 评论 -
解决ie对ajax请求的结果进行缓存的问题
问题描述: IE浏览器会对ajax请求的结果进行缓存 导致下次再发送同样请求的时候得到的数据是IE本地缓存的数据 而不是最新数据解决办法: 在请求地址(URL)后面跟上时间戳 : Date.now(), 这样每次请求的url都不一样 让每一次发送的请求都是新的请求 使得它不走本地缓存而直接去服务器拿数据,保证每次拿到的都是最新数据如何加时间戳: 在路径后面原创 2020-11-04 16:45:36 · 300 阅读 · 0 评论 -
服务端响应 JSON 数据
思想: 服务端: 将数据转为字符串的形式响应: JSON.stringify() 前端: 拿到服务端响应的字符串结果,把它解析为原来的对象形式:JSON.parse()上代码: &nbs原创 2020-11-04 16:26:58 · 526 阅读 · 0 评论 -
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 · 604 阅读 · 0 评论 -
创建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 · 428 阅读 · 0 评论 -
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 · 338 阅读 · 0 评论 -
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 · 1534 阅读 · 0 评论 -
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 · 131 阅读 · 0 评论 -
关于页面不能显示滚轮进行向下浏览的问题
问题描述：做案例时，页面只能显示一页的内容，且不能滚动浏览下面的内容原因： 我给body添加了overflow：hidden；解决方法：去掉overflow：hidden；给body添加overflow-y：auto；...原创 2020-02-22 17:03:04 · 1606 阅读 · 0 评论 -
flex布局 子元素常见属性之 align-self 和 order
align-self ： 控制子项自己在侧轴上的排列方式，用来给单个子元素设置，会覆盖掉父元素的align-items属性设置。属性值：flex-start（默认）、flex-end、center、eg:  ...原创 2020-02-20 17:28:58 · 1624 阅读 · 2 评论 -
flex布局 子元素常见属性之 flex
flex 用来定义子元素分配父元素的剩余空间，用flex来表示占多少份用法： flex：具体数字；（默认是0） 例如 flex：1； 表示该子元素占用其父元素剩余空间的一份。 通...原创 2020-02-20 16:33:46 · 2288 阅读 · 0 评论 -
flex布局中子元素水平垂直居中的方法
flex布局中如何让子元素水平垂直居中思路：先让子元素在主轴上居中对齐：justify-content: center;再让子元素在侧轴上居中对齐：align-items: center;（单行） 或者 align-content: center;（多行）注意：不要忘了给父元素添加display：flex；，这是开启 flex 布局的钥匙举例说明：单行子元素实现水平垂直居中：...原创 2020-02-18 00:02:44 · 14678 阅读 · 0 评论 -
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 · 1076 阅读 · 0 评论 -
align-items 和 align-content的区别
align-items 和 align-content的区别 虽然两者都表示设置子元素在侧轴上的排列方式，但： align-items 应用于子元素没有换行（父元素代码中没有flex-wrap：wrap；）的情况下 &n...原创 2020-02-17 23:32:57 · 277 阅读 · 0 评论 -
flex布局 父元素属性之 align-content 子元素在侧轴上的排列方式（多行子元素）
align-contentalign-content：设置多行子元素在侧轴上（默认侧轴为y轴）的排列方式注意：该属性只对父元素中有换行情况的子元素有效，即父元素代码中有“ flex-wrap：wrap；”，才会对子元素有效align-content的属性值：属性值含义flex-start子元素在侧轴的头部开始排列 （默认值）flex-end子元素在侧轴的尾部开...原创 2020-02-17 23:11:44 · 1119 阅读 · 0 评论 -
flex布局 父元素属性之 align-items 子元素在侧轴上的排列方式（单项子元素）
align-itemsalign-items ：设置子元素在侧轴上（默认侧轴为y轴）的排列方式align-items的属性值：属性值含义flex-start子元素贴着侧轴的头部排列（默认值）flex-end子元素贴着侧轴的尾部排列center子元素在侧轴上居中对齐stretch拉伸，使得子元素在侧轴方向上与父元素等大具体实例（以侧轴为...原创 2020-02-17 21:27:33 · 1358 阅读 · 0 评论 -
flex布局 父元素属性之 flex-wrap 是否换行
flex-wrapflex-wrap ：是否允许子元素换行。flex-wrap的属性值：属性值含义nowrap不换行 （默认值）wrap换行解释说明： 默认值为nowrap，不换行，当父元素在主轴上一行（一列）装不下子元素时，将会对子元素进行等比缩放，使子元素能在主轴上一...原创 2020-02-17 18:18:11 · 10690 阅读 · 0 评论 -
flex布局 父元素属性之 justify-content 主轴上子元素的排列方式
父元素属性之 justify-content justify-content：设置主轴上子元素的排列方式justify-content 的属性值如下：属性值含义flex-start从主轴的头部开始排，主轴：x轴 左对齐；y轴 顶部对齐（默 认值）f...原创 2020-02-17 17:27:13 · 1684 阅读 · 0 评论