js总结

最新推荐文章于 2022-01-27 15:08:05 发布

Z______tz

最新推荐文章于 2022-01-27 15:08:05 发布

阅读量264

点赞数

文章标签： js

本文链接：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的基础语法

常见的引入方式

直接在html页面中使用内联的script标签内编写
引入外部脚本文件（js文件）
直接在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相同，分为：

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

分支语句

If/else

因为js中的任何类型都可以转换成布尔类型，所以if括号内的表达式可以是任意类型的表达式
其他类型转换成boolean类型的规律：
1. 对于number类型，任何非0值都是true
2. null和undifined都会被转换成false
3. 非空对象会被转成ture
4. 非空字符串(’ ')会被转成true,‘false’也是true，’'空字符串会被转成false
switch

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

循环语句

普通for循环(idea快捷表达是fori)
while循环
do-while循环
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界面中或浏览器的某些动作影响导致代码执行，而且触发这些动作的操作被称为事件

常见的事件主要包含:

窗口事件
鼠标事件
键盘事件
文档事件
对象（音频、视频等）事件

事件绑定

直接在html元素中通过事件名绑定（不推荐）
```
<标签 on事件名='function() {}'></标签>
```
在js中获取元素调用元素的事件名
```
元素对象.on事件(function() {})
```
获取对象后使用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对象

Date(毫秒数)
Date(能被Date.parse()识别的字符串)
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整个文档树中的任意节点进行访问（增删改查），倒置的文档树如下：

名词解释：

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

Dom的获取

获取所有的元素(数组)

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

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

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

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

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

根据元素的name属性获取元素集合（一般只有表单元素才有name属性）
```
let arr = document.getElementsByName('lang');//取到所有name为lang的元素
```

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

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

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

document.querySelector：获取指定选择器选中的单个元素
```
let h2 = document.querySelector('h2');
```

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向指定节点插入元素的方法主要包含：

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

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

append与appendChild的不同之处在与，前者无返回值，后者会同时返回插入节点
节点.insertBefore(newNode , redNode）

向当前节点的子节点redNode之前加入newNode
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的组成

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

history

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

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

localStorage&sessionStorage

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

localStorage
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数据格式的分类

标量（一个值）

序列（数组）

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

映射(对象)

{
		"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请求分为以下几个步骤：

获取XMLHttpRequest对象

ie使用new ActiveXObject()创建对象
打开一个到服务端的连接
发送连接
当请求状态改变时，需要接受来自服务端的响应数据

请求状态readState

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);
            }
        }
    }
})