js总结

最新推荐文章于 2022-01-27 15:08:05 发布
最新推荐文章于 2022-01-27 15:08:05 发布
阅读量258 收藏 1
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z______tz/article/details/112152789
版权

JavaScript学习总结

Js的概述

​ JavaScript简称js，是一种直译式、弱类型的、基于事件驱动的语言。它的解释器（js引擎）属于浏览器的一部分，因此js是一种广泛用于客户端的脚本语言

强类型与弱类型的区别

  • 强类型语言-java：java中的任何变量在使用前都必须声明其数据类型，而且变量一旦确定类型就无法更改。
  • 弱类型语言-js：由于没有编译的过程，js中的所有变量类型都是在运行期间动态确定的，而且可以随时修改其数据类型。

java是一门服务端语言（有编译过程，运行速度更快，支持多线程环境），js是一门客户端语言（无需编译，单线程）

Js的组成

  • EXMAScript核心语法：提供核心语言功能
  • 浏览器对象模型(BOM)：提供与浏览器交互的方法和接口
  • 文档对象模型(DOM)：提供访问和操作网页内容的方法和接口

Js的基础语法

常见的引入方式

  1. 直接在html页面中使用内联的script标签内编写
  2. 引入外部脚本文件（js文件）
  3. 直接在html元素中用内嵌的方式使用

标签中href和src的区别

  • href关联的资源会与页面同步加载
  • src关联的资源是执行时，浏览器停止对页面的渲染，先读取src关联的资源，再将资源替换到该位置

Js的数据类型

虽然js是一门弱类型语言，但它也支持很多不同类型的数据，不同类型之间也有不同区别

  • 数值类型（包含浮点）number
  • 字符类型（包含字符串和字符）string
  • 布尔型 boolean
  • 数组 object引用类型
  • 对象 object
  • null 同样属于object
  • undefined

null和undefined

  • null：表示空对象，即在内存申请了空间，但没有为其赋值
  • undefined：未定义，它表示的是未申请空间的类型，即表示该变量不存在

Js的运算符

  • 算数运算：+、-、 *、 /、 %、++、–

    由于js中没有单独划分浮点型，所以无论是整数还是小数，使用除法时都会获取到最精确的值

  • 关系运算：>、<、<=、>=、/=、!=/!==

    ==：自动进行类型转换的比较

    ===：区分类型的比较

  • 逻辑运算：&&、||、!

  • 位运算：<<、<<<、>>、^、&、！

  • 三目运算：布尔表达式？结果1：结果2

  • 其他运算符：+(正号)

    string类型前加上+，字符串会被强制转换成数字，如果无法强转就会输出NaN（not a number）

Js流程控制

与java相同，分为：

  • 顺序语句
  • 分支语句
  • 循环语句
分支语句

  1. If/else

    因为js中的任何类型都可以转换成布尔类型，所以if括号内的表达式可以是任意类型的表达式

    其他类型转换成boolean类型的规律：

    1. 对于number类型，任何非0值都是true
    2. null和undifined都会被转换成false
    3. 非空对象会被转成ture
    4. 非空字符串(’ ')会被转成true,‘false’也是true，’'空字符串会被转成false

  2. switch

    js中的switch支持任意类型的比较

循环语句

  1. 普通for循环(idea快捷表达是fori)

  2. while循环

  3. do-while循环

  4. forin循环

    语法：

    for (var key in object){
			//循环体
}

    当object是数组时，key表示该数组元素索引

    当object是对象时，key表示对象中的属性名，通过object[key]获取该对象属性名为key的属性值

Js的函数

​ 由于js是弱类型语言，所以js中的函数与java的方法相比较来说，js函数的参数列表不需要也不能标记参数类型，而且也不需要声明返回值类型，如果需要返回值，直接在函数体内return即可。

函数定义

​ 与java一样包含4种类型

function print(msg) {
    console.log(msg)
}

function msg() {
    return new Date();
}

function max(a, b) {
    return a > b ? a : b;
}

function show(){
    console.log("无参数方法")
}
Arguments

arguments用来获取调用函数时的传参个数(arguments.lenght)，从而可以实现可变参数列表的函数

function add(a,b,c,d,e){
    console.log(c)//如果未传参,c为undefined,五个参数相加的结果会变成NaN(not a number)
    var len = arguments.length//传入参数个数
    if(len === 1){
        console.log(a);
    }else if (len ===2){
        console.log(a+b)
    }else if (len ===3){
        console.log(a+b+c)
    }else if (len ===4){
        console.log(a+b+c+d)
    }else if (len >=5){
        console.log(a+b+c+d+e);
    }
}
add();
add(10,20);
add(10,20,30,40,50,60,70,80);
函数调用

​ js的函数调用不需要像java一样通过对象调用，只需要在script语句块中直接调用即可，或者通过html元素中的相关事件进行调用

匿名函数
//将匿名函数变成有名字的函数(把函数存储到变量中)--->这时已经不是匿名函数了
var add = function (a, b) {
    console.log(a + b);
}
add(1, 2);

//自调用函数(不仅针对匿名函数，有名字的函数也可以进行自调用)
var value = (function (a, b) {
    let r = a > b ? a : b;
    console.log('匿名函数被执行')
    return r;
})(10, 20);
console.log(value)

闭包

  • 闭包:即在一个函数内部定义的函数
  • 闭包功能:提供了在函数外部对函数内部局部变量的访问能力

Js中的变量作用域

i = 20;
(function a(){
    j = 10;
    //以var标识的变量是局部变量,无法在作用域(方法体)外调用
    var n = '方法体中的变量';
})();
console.log(i+','+j);
console.log(n)//Uncaught ReferenceError: n is not defined

//非函数的语句块无法形成作用域,因此该区域定义的变量,在外部可以被调用(变量污染)
if(i > 10){
    var num = '非函数语句块中的变量';
    //es6新增,为防止变量污染而存在的关键字,let声明的变量只能在声明区域使用
    let m = '非函数语句块中的局部变量';
}
console.log(num);
console.log(m);//Uncaught ReferenceError: m is not defined

Js事件

​ js是一门基于事件驱动的语言，大多数时候js的代码不是主动执行，而是被html界面中或浏览器的某些动作影响导致代码执行，而且触发这些动作的操作被称为事件

常见的事件主要包含:

  1. 窗口事件
  2. 鼠标事件
  3. 键盘事件
  4. 文档事件
  5. 对象（音频、视频等）事件
事件绑定

  1. 直接在html元素中通过事件名绑定（不推荐）

    <标签 on事件名='function() {}'></标签>

  2. 在js中获取元素调用元素的事件名

    元素对象.on事件(function() {})

  3. 获取对象后使用addEcentListener()方法将事件与元素绑定

    元素对象.addEcentListener('事件',function() {})

事件流

事件冒泡&事件捕获
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');
var d3 = document.getElementById('d3');

/*
    当addEventListener的第三个参数全部都设置为true(默认为false)时,事件执行会从冒泡变成捕获
    事件捕获:从外到内依次执行事件
    事件冒泡:从内到外依次执行事件
 */

d1.addEventListener('click',function (){
    console.log('外');
},true)
d2.addEventListener('click',function (){
    console.log('中');
},true)
d3.addEventListener('click',function (){
    console.log('内');
},true)
取消事件传播

只需要调用事件对象的stopPropagation()方法即可，无论是事件冒泡还是事件捕获，只要在事件中调用stopPropagation()，它的事件就不会再向外（向内）传播

d1.addEventListener('click',function (){
    console.log('外');
})
d2.addEventListener('click',function (){
    console.log('中');
})
d3.addEventListener('click',function (e){
    console.log('内');
    //取消事件传播
    e.stopPropagation();
})

Js面向对象

自定义对象（json/JS对象）

​ js中有一种固定的对象表达形式，即json对象。json对象是一种以键值对为标准的对象表达形式(类似java中的Map)；

var user = {
   	id : 1,
  	name : '张三',
  	class : ['java','js','c++'],
  	study : function(){
      //函数体
    }
}

​ 随着互联网技技术的发展以及前后端分离技术的出现，根据js的json对象演变出了一种特殊的数据格式json字符串，用于实现前端数据传递。

{
		"id" :1,
		"name" : '张三'
		"group" :['java','js','c++'],
    "study" : function(){
      //函数体
    } 
}

全局函数

  • parseInt 将字符串转换成整数类型并返回
  • parseFloat 将字符串转换成浮点数类型并返回
  • eval 将字符串转换成可以执行的代码（不建议使用）
  • encodeURI 将目标字符串转码为URL编码
  • decodeURI 将url编码的字符串解码为原始字符串值

type of n ：获取n的数据类型

n istanceof Number：判断n是否是Number类型

Number
  • 工厂模式创造Number对象 var n = Number()
  • 指定保留小数点位数（四舍五入）：n.toFixed(2)
  • 根据本地数据格式(local:最大保留3位小数),并转换成String：n.toLocaleString()
String

​ 与java中的String类高度相似，内部包含的方法也基本一致，String对象同Number一样也拥有两种创造方式（new、工厂模式）

var s = new String('TestWord');
console.log('字符串长度:',s.length);
console.log(s.big());// 相当于在字符串外部添加<big>标签
console.log(s.bold());//加粗：<b>TestWord</b>
console.log(s.link());//添加链接：<a href="undefined">TestWord</a>

//正则验证
//使用String的match方法会返回正则匹配到的字符串
console.log('15807146843'.match(/^1[3578]\d{9}$/));

console.log('ab,cd,ef'.split(','));//使用指定字符串分割,返回数组
console.log('a.txt'.endsWith('.txt'));//是否以指定字符串结尾
console.log('     ada    '.trim());//去除前后空格
Array

​ Array是js中的数组对象，创建(空数组)方式包含以下：

var a1 = [];
var a2 = new Array();
常用方法
  • 数组排序 arr.sort([可使用λ表达式或匿名函数设置比较器])
  • 数组反转 arr.reverse()
  • 向数组末尾追加元素 arr.push()
  • 向数组头部追加元素 arr.unshift()
  • 返回数组末尾元素,并移除 arr.pop()
  • 返回数组头部元素,并移除 arr.shift()
  • 获取指定元素索引(如果存在多个相同元素,会返回最小的索引) arr.indexOf()
  • 获取指定元素索引(如果存在多个相同元素,会返回最大的索引) arr.lastIndexOf()
  • 从指定索引开始(index),删除指定个数(2)的元素 arr.splice(index,2)
  • join:指定指定的符号把数组中的每个元素拼接成一个字符串 arr.join(",");
Math

​ Math对象类似java的Math类，Math也无法按照普通方法创建对象，所有方法都像静态方法一样可以直接调用

Date
创建Date对象
  1. Date(毫秒数)
  2. Date(能被Date.parse()识别的字符串)
  3. Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]])
常用函数
  • 获取当前日期(距离1900.1.1)的时间：var date = Date.now();
  • 获取年：date.getFullYear();
  • 获取月(-1)：date.getMonth()
  • 获取日期在月中的天数：date.getDate()
  • 获取时：date.getHours()
  • 获取分钟：date.getMinutes()
  • 获取秒：date.getSeconds()
RegExp
//构造器创建(需要注意转移符号)
//方法一
var regex = new RegExp('\\d{3,5}');
//方法二:工厂方法
regex = /\d{3,5}/;//该构造方法与上面效果相同

//判断给定的字符串是否匹配正则表达式
console.log(regex.test('12345'))
//拿到匹配到的数据(数组)
console.log(regex.exec('da12312321dsdzw12')[0]);
var phone = 'czxe312dxfgaw313797773410123dq1582698130012312';

regex = /1[3578]\d{9}/g;//g表示全局匹配
var arr ;
//使用while循环可以取到多个符合要求的字符串
while ((arr = regex.exec(phone))!== null){
    console.log(arr[0]);
}

console.log(/world/i.test('HelloWorld'))//i表示忽略大小写匹配

Dom与Bom

Dom（文档对象模型）

​ js支持DOM编程，DOM即Document Object Model,可以通过js的dom操作对html整个文档树中的任意节点进行访问（增删改查），倒置的文档树如下：

名词解释：

  1. 元素（element）：html任意一个标签开始IDAO结束，之间的内容（包括标签本身）都称之为元素，一个元素也被称为一个节点
  2. 属性（Attribute）:属性是开始标签中的属性名和属性值构成的一个键值对结构
Dom的获取

  1. 获取所有的元素(数组)

    let alls = document.all;
console.log(alls);

  2. 通过标签名获取元素(数组)

    let titles = document.getElementsByTagName('h1');
    console.log(titles);

  3. 根据class获取元素(数组)，存在兼容问题(IE不支持)，谨慎使用

    let rows = document.getElementsByClassName('row');
    console.log(rows);

  4. 根据元素的name属性获取元素集合（一般只有表单元素才有name属性）

    let arr = document.getElementsByName('lang');//取到所有name为lang的元素

  5. 根据元素id获取元素（唯一）

    let selectAll = document.getElementById('selectAll');

以上是比较常规的获取dom的方式，同时js也提供了可以通过css选择器获取匹配元素的方式

  1. document.querySelector：获取指定选择器选中的单个元素

    let h2 = document.querySelector('h2');

  2. document.querySelectorAll：获取指定选择器选中的多个元素

    //查询选择器:根据css的选择器获取指定选择器选中的多个元素
let nodeListOf = document.querySelectorAll('td');
console.log(nodeListOf);
//获取所有的class='row',h1,h2元素
let listOf = document.querySelectorAll('.row,h1,h2');
console.log(listOf);
插入Dom

​ js的document向指定节点插入元素的方法主要包含：

  1. 节点.appendChild(dom对象) /节点.append(dom对象)

    appendChild向指定节点中插入子元素（子元素是一个dom对象，可以通过createElement(‘标签名’)创建）

    append与appendChild的不同之处在与，前者无返回值，后者会同时返回插入节点

  2. 节点.insertBefore(newNode , redNode）

    向当前节点的子节点redNode之前加入newNode

  3. innerHTML/innerText

    直接插入整段html代码，多行代码用es6的新特性书写

更新Dom
  • innerText：将文本内容插入到指定节点
  • innerHTML：将html代码插入到指定节点
删除Dom
  • removeChild(childNode)：删除当前节点下指定的子节点
  • remove()：删除当前节点对象
DOM补充
  • children: dom元素通过该属性可以获取当前节点下的所有的子节点（集合）
  • parentNode：dom元素通过该属性可以获取当前节点的父节点(唯一)

Bom（浏览器对象模型）

​ Bom全称Brower Object Model，js中所有关于浏览器操作的顶层元素都是来自window对象，window对象对外界提供了一个用于操作浏览器的访问结构，通过bom可以获取window相关信息，比如屏幕尺寸、浏览器的详细版本（版本、内核、配置等），页面跳转、历史记录、定位、本地存储，对移动设备来说还可以获取与本机硬件设备交互的接口（位置信息、蓝牙、摄像头、陀螺仪等等）

window

​ window对象是BOM的顶层对象，一般来说全局的this指的都是window对象，虽然一般情况下调用dom时是直接调用，并没有写它的父元素bom，但document对象也是属于window对象的

window的常见属性

  • innerWidth 浏览器可视区域宽度
  • innerHeight 浏览器可视区域高度
  • outerWidth 浏览器窗口宽度
  • outerHeight 浏览器窗口高度
基于window对象的弹窗函数
  • alter()：警告框
  • confirm()：确认框
  • prompt()：消息输入框，输入消息后该弹窗会返回一个存储了输入内容的变量
  • open()：自定义窗口

使用layUI的独立弹窗插件可以更轻松的实现好看的弹窗效果，详情查看官网或本地插件包中的文档，在使用前需要导入：

  • jq包
  • layer.js包
//警告框
document.getElementById('win1').addEventListener('click',function () {
    // window.alert('这是一个警告弹窗')
    layer.alert("这是一个警告弹窗");
});
基于window的定时器

  • setTimeout()：定时任务，延迟指定时间，执行一次回调函数（一次执行）

    //setTimeout() 延时3000ms执行任务(定时任务,仅执行一次),会返回该动画序号(从1开始)
let flag = window.setTimeout(function () {
    console.log('hello',flag);
    //清除定时任务
    window.clearInterval(flag);
},3000);

  • setInterval()：定时任务，每隔指定时间执行一次回调函数（反复执行）

    使用案例：实时电子时钟、帧动画等…

navigator

​ 用于获取浏览器的信息，但navigator容易被用户篡改，所以js获取到的navigator也不是一定是真实的浏览器信息

  • navigator.appName：浏览器名称；
  • navigator.appVersion：浏览器版本；
  • navigator.language：浏览器设置的语言；
  • navigator.platform：操作系统类型；
  • navigator.userAgent：浏览器设定的User-Agent字符串。
screem
  • screen.width：屏幕宽度，以像素为单位
  • screen.height：屏幕高度
  • screen.availHeight：可用高度
  • screen.availWidth：可用宽度
  • screen.colorDepth：色深，返回颜色位数，如8、16、24
location

常用的location跳转方式

<button onclick="location.href = 'http://www.baidu.com'">location页面跳转方式</button>
<button onclick="location.reload()">页面刷新</button>
<!--页面替换后不同于跳转,它会完全替换当前页面地址,没有后退选项-->
<button onclick="location.replace('http://www.bootcss.com')">页面替换</button>

location对象的属性

var local = location.href;
console.log('当前页面链接',local);
console.log('获取连接协议',location.protocol)
console.log('请求资源',location.pathname)
console.log('查询地址',location.search)
console.log('hash',location.hash)

完整URL的组成

  1. 协议(http://|https://)
  2. 主机地址(域名/ip):计算机在网络中的位置
  3. 端口号(0~65535(2个字节)):该计算机中网络应用程序的对外访问端口(门牌号)
  4. 请求资源
  5. 查询路径: 指提交到后台的数据 ?useranme=admin&pwd=789guyti78…
  6. hash值(可能没有)
history

​ history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()`可能会让用户体验不好。

​ 新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。

localStorage&sessionStorage

​ h5新增了2个前端存储机制

  1. localStorage
  2. sessionStorage

​ 其中本地存储（localStorage）可以将数据(服务/客户端数据)缓存到本地浏览器中，可以在不通过后台的方式把一个页面的数据带到另一个页面中，无论页面如何刷新，甚至电脑重启都不会影响指定数据的存储。

​ sessionStorage中存储的数据在一次会话中可以一直存在，一旦浏览器关闭或者session有效期(一般是20min)到达之后会自动清理。

​ 两种存储机制的操作API都是一致的，缓存中存储的数据都是以键值对结构存在的。

在浏览器中的存储位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hVoZY8XE-1609677291464)(file:///Users/zhangping/Library/Application Support/typora-user-images/image-20201228140813957.png?lastModify=1609660861)]

常用函数
  • setItem(key,value)：向缓存对象中添加一个元素，键和值都是string类型
  • getItem(key)：根据键从缓存对象中取出一个元素
  • remove(key)：根据键从缓存对象中删除一个元素
  • clear()：清空缓存对象中的所有元素
localStorage和sessionStorage之间的区别

​ 存储位置和时长

localStorage和sessionStorage的应用场景

  • localStorage适合于网站首页数据的缓存，比如购物网站、门户网站等安全性不高的数据
  • sessionStorage适合于临时存储一次会话的信息，比如用户的登录密码等（安全性要求较高）

Json数据格式详解

​ 通过对localStorage和sessionStorage存储机制的了解，html5中的这两种存储机制都只能存储字符串数据，无法存储对象等复杂数据，但是真实项目中的缓存往往会是复杂数据(对象、集合等)，此时可以考虑使用一种特殊的数据交换格式：JSON

JSON字符串概述

​ JSON(JavaScript Object Notation)字符串：是源于JavaScript对象改编而来的字符串形式的对象、数组表达形式，但作为一种数据表达格式，json字符串基本上可以被所有类型的语言识别，因此常常会把json字符串作为数据传输的媒介,JSON（重量级：XML）是一种轻量级的数据交换格式，广泛应用于各种语言之间的数据交换，目前各大服务端语言也都提供了相当丰富的用于解析和转换json字符串的工具。

​ json只表示数值本身，无法表示函数

JSON数据格式的分类

  1. 标量（一个值）

  2. 序列（数组）

    ['admin','json']
↓
[
	{
		"id":1,
		"name":"admin",
		"age":18
	},{
		"id":1,
		"name":"json",
		"age":18
	}
]

  3. 映射(对象)

    {
		"id":1,
		"name":admin,
		"age":18,
		"group":{
				"gid": 1001,
				"gname":"vip1"
		}
}

JS中JSON序列化与反序列化

  • JSON序列化：JSON.stringify(指定对象)，返回一个json字符串
  • JSON反序列化：JSON.parse(指定json字符串)，返回一个js对象
json = `[
    {
        "id":1,
        "name":"admin",
        "age":18,
        "group":{
            "gid": 1001,
            "gname":"vip1"
        }
    },
    {
        "id":2,
        "name":"json,
        "age":35,
        "group":{
            "gid": 1005,
            "gname":"vip5"
        }
    }
]`;
//json字符串反序列化(解析成js对象)
json = JSON.parse(json);
//取到指定数据
console.log(json[0].group.gname);//vip1
//js对象序列化(格式化成成json字符串)
console.log(JSON.stringify(json))

Ajax基础

​ Ajax全称Asynchronous JavaScript and XML（异步的js和XML，由于时代的发展，ajax和xml的关系已经不大了，称作aj或许更合适）。

之前所有的页面跳转都是全局的页面刷新技术，比如:

  • a 超链接
  • form 表单提交
  • location.href js跳转

​ 上述代码的执行都会导致整个页面刷新，受到服务端或客户端网络带宽的影响，可能会导致页面数据显示缓慢，影响用户体验。但实际项目中的许多数据更新是不需要进行全局刷新的，比如用户注册时检测该账号是否可用、或页面数据展示时部分数据的更改更新。局部刷新技术Ajax的出现解决了这一问题。

Ajax并不算新技术，它基于js的一项能够与服务端交互的对象(XMLHttpRequast)实现

Ajax的优势（异步）

  • 改善表单验证方式，验证时不需要提交整个表单，也不需要开启新页面
  • 页面可以按需获取数据，以减少大量数据的请求
  • 客户端请求数据无需刷新整个页面，减少用户的等待时间，提高用户的体验

Ajax使用步骤

一个标准的ajax请求分为以下几个步骤：

  1. 获取XMLHttpRequest对象

    ie使用new ActiveXObject()创建对象

  2. 打开一个到服务端的连接

  3. 发送连接

  4. 当请求状态改变时，需要接受来自服务端的响应数据

    请求状态readStateimage-20201228160311132

http协议

分为请求头(Request Head)和响应头（Respond Head）

  • 请求头中包含的重要部分为-请求方式

    GET | POST

  • 响应头中包含的重要状态为-响应状态码：

    • 200：ok响应成功
    • 404：not found请求资源不存在
    • 500：internal error内部服务器错误

案例

Ajax发送GET数据
  • get(html中表单methond属性值为get(默认))
  • 1.1获取与服务器的连接对象
    let xmlHttpRequest = new XMLHttpRequest();
  • 1.2获取表单数据
    let form = document.getElementById(‘login-form’);
    // let m = form.method.value;//隐藏域一般来说是固定的,所以下方的url可以写死,不用通过变量获取
    let uname = form.uname.value;
    let pwd = form.pwd.value;
  • 1.3拼接url请求地址（将获取到的表单数据拼接到地址中）
  • 2.打开一个连接
    xmlHttpRequest.open(‘GET’,url)
  • 3.发送请求
    xmlHttpRequest.send(null)//因为要发送的数据已经写在地址栏里了,所以发送的数据依旧是null
    //2.打开一个连接
    xmlHttpRequest.open('GET',url)
    //3.发送请求
    xmlHttpRequest.send(null)//因为要发送的数据已经写在地址栏里了,所以发送的数据依旧是null
    xmlHttpRequest.onreadystatechange = function () {
        if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200){
            //4.获取服务端发送过来的数据
            let responseText = xmlHttpRequest.responseText;
            // alert(responseText);
            let data = JSON.parse(responseText);
            //code属性: 登录失败,code为0-false      登录成功,code!=0
            if (data.code){
                //code不为0,跳转
                location.href = 'main.html';
            }else {
                //code为0,显示data的错误信息属性
                alert(data.msg);
            }
        }
    }
Ajax发送POST数据
  • html中表单methond属性值为get(默认)
  • enctype编码格式属性为"application/x-www-form-urlencoded"
document.getElementById('login-btn').addEventListener('click',function () {
    //1.1获取与服务器的连接对象
    //1.2获取表单数据
    //1.3设置url地址
    //2.打开一个连接
    xmlHttpRequest.open('POST',url)
    //3.发送请求
    //3.1post请求必备:设置请求头
    xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    //3.2选用post方式发送,需要带上需要发送的数据
   xmlHttpRequest.send(`method=login&sno=${uname}&password=${pwd}`)
    xmlHttpRequest.onreadystatechange = function () {
        if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200){
            //4.获取服务端发送过来的数据
            let responseText = xmlHttpRequest.responseText;
            // alert(responseText);
            let data = JSON.parse(responseText);
            //code属性: 登录失败,code为0-false      登录成功,code!=0
            if (data.code){
                //code不为0,跳转
                location.href = 'main.html';
            }else {
                //code为0,显示data的错误信息属性
                alert(data.msg);
            }
        }
    }
})

GET请求和POST请求的区别

get和post都是客户端向服务端发送请求的方式

  • GET：一般用于获取服务端数据，并且可以向服务端提交少量数据(不超过1kb)，而且提交的数据会通过查询路径被直接拼接在地址栏中
  • POST：一般用于向服务端提交数据，提交的数据会经过封装不会直接在地址栏中显示，所以提交的数据没有大小限制
Z______tz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript总结笔记
ww981580010的博客
10-06 1011
1.1 和Java的关系本质上来说没有关系js是1995年由网景公司推出的1.2 目前的版本js的标准是ECMAScript目前我们学习的都是ES61.3 定义是一种具有函数优先级,轻量级,解释型的编程语言脚本语言支持面向对象,声明式,函数式的编程1.4 小知识js也可以做服务器端的开发,比如node.jsjavascript他是甲骨文公司的注册商标ECMA国际组织他是Javascript的基础指定的。
javascript总结
09-06
在“javascript总结”这个主题中，我们将深入探讨JavaScript的基础知识，以及它如何与HTML标签相互作用来增强用户体验。 首先，让我们从HTML标签开始。HTML（超文本标记语言）是网页内容的结构框架，而JavaScript则...
js e.stopPropagation()阻止冒泡事件和e.preventDefault()阻止默认行为的应用场景
PrimaryColor
01-27 2746
一、阻止冒泡事件。 示例图： 通常，在很多用户界面中，都经常出现如上图所示，点击列表的时候，进入这条数据的详情页面，点击编辑的时候，弹窗编辑这条数据的信息。但是呢，做完之后，发现点击编辑的时候不仅仅会打开弹窗并且还会跳转页面，也就是两个事件都触发了，这个时候我们就需要在点击编辑的时候，阻止事件继续往上派发。 代码： $('.toDetail').on('click',function(){ console.log('跳转详情页面'); }); $('.editDetail').on('
web存储 | Cookie、Web Storage API（localStorage、sessionStorage）、IndexedDB
海胆的博客
12-24 761
localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文。关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。检查浏览器是否支持DOM存储。
JS易混淆的方法整理
weixin_34122548的博客
02-22 197
js的字符串方法如substr、substring，数组方法如slice、splice等名字相近，用法稍有不同，让开发者在开发过程中总是记不起其用法，需要查资料。现整理一下，希望有助大家记忆。 String对象 slice stringObject.slice(start, end) var a = 'Hello world!'; var b = a.slice(2); var c = a...
js 操作List对象集合 常用小方法
热门推荐
rookieTa的博客
08-30 4万+
对List去重，根据对象某个属性去重 示例集合 const list = [ {id: 1, name: ‘aa’ , age: 15}, {id: 2, name: ‘bb’ , age: 16}, {id: 2, name: ‘cc’ , age: 17}, ]; 示例 调用方法 arrayUnique = (arr, name) => { const hash = {}; ret...
e.stopPropagation() 失效原因
echo
11-06 6297
<body> <div class="father"> <div class="son"> </div> </div> </body> 假如此父子元素为 动态添加的元素 所以在添加事件的时候需要绑定到父级元素 例如：父元素事件 $("body").on("click",".father",function(e){ alert(1) }); 例如：子元素事件 $(document).on("click",".son",f
JS总结
06-01
在"JS总结"这个主题中，我们可以探讨以下几个关键知识点： 1. **基础语法**：JavaScript的基础包括变量声明（var、let、const）、数据类型（如字符串、数字、布尔、null、undefined、对象、数组等）、运算符（算术...
前端JavaScript总结
06-19
在这个"前端JavaScript总结"中，我们将深入探讨JavaScript的基本概念、语法特性、核心功能以及在实际开发中的应用。 首先，JavaScript是一种解释型的、弱类型的脚本语言，它基于ECMAScript规范，并在Web浏览器中...
关于bootstrap-select赋值时候报错： e.stopPropagation is not a function
键圣的博客
11-22 1万+
场景是：使用$('#vendorId').selectpicker('val',data.vendorId);给单选框赋值的时候js报错 然后不能代码更改单选框的值。 究其原因是因为selectpicker 没能完整的初始化， 现在添加代码： console.log("默认选中"+$('#vendorId').val()); $('#vendorId').selectpicke
Uncaught ReferenceError: ActiveXObject is not defined
专业大神之路
08-29 4万+
if (window.DOMParser) { // Firefox, Chrome, Opera, etc. parser=new DOMParser(); xmlDoc=parser.parseFromString(xml,"text/xml"); } else // Internet Explorer { xmlDoc=new ActiveXObject("Micr...
$ is not defined
qq_45987428的博客
10-14 1261
今天在学习js的时候突然发现一个问题，就是页面引入js记不起来了，然后就跟着脑子中仅有的一点印象，不断的改位置，然后将js引用上去，所以就写下来这篇文章以防止自己在忘！ 具体什么原因呐！就是报了两个错误： 第一个：XXXX is not defined 第二个：$ is not defined 在这里插入图片描述 总的来说就是 is not defined 先说第一个问题： 我写完了然后通过 <script type="text/javascript" src="js/diamond.js"&gt
(index):11 Uncaught ReferenceError
weixin_34191734的博客
12-03 646
2019独角兽企业重金招聘Python工程师标准>>> ...
Jquery使用stopPropagation需要注意的问题
空想家的专栏
08-05 3694
在使用live()绑定事件时，stopPropagation()失效了，查阅后发现官网上作者给出一个解决方案，截图如下：
常用芯片手册芯片资料MAX260常用芯片手册芯片资料MAX260
最新发布
08-31
常用芯片手册芯片资料MAX260常用芯片手册芯片资料MAX260提取方式是百度网盘分享地址
常用芯片手册芯片资料82530常用芯片手册芯片资料82530
08-31
常用芯片手册芯片资料82530常用芯片手册芯片资料82530提取方式是百度网盘分享地址
全国互联网网民数和互联网普及率.xlsx
08-31
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141286857 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 各省、地级市、区县互联网普及率、宽带接入户数和电话用户数等 1、全国互联网网民数和互联网普及率（1997-2020年）； 2、各省互联网网民数和互联网普及率（1997-2016年）； 3、地级市互联网宽带接入用户（1996-2020年）； 4、各区县电话用户数（2004-2019年）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值