前端面试题
1 ajax请求方式, 参数类型, 状态码?
1 jquery ajax常用参数：
$.ajax({ url:"", // ajax 请求地址 type:"GET",//请求方式 ’GET‘或’POST‘，默认为’GET‘。 dataType:"json",//根据返回数据类型，可以有如下数据可选：xml html script json jsonp text data:{}, //发送到服务器的数据，可以直接传对象{code: 456}，如果是get请求会自动拼接到url后面，如：&code=456; //请求成功后的回调函数 success: function(data){ }, //请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。 error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(textStatus);// 打印错误信息 } });
2 jquery ajax发送一个get请求
$.get("请求url","发送的数据对象","成功回调","返回数据类型");
3 jquery ajax发送一个post请求
$.get/post( url , data , function(参数){} , dataType);
4 状态码
200: 请求响应成功
302: 需要进行重定向操作
304: 浏览器缓存
400: 表示服务器不理解客户端请求的语法
404: 页面找不到, 资源找不到
405: 表示对应的servlet中没有重写doget或dopost等doxxx的方法, 会出现405的信息
500: 服务器代码错误
501: 服务器不支持请求的函数
2 jquery常用选择器
1 $('标签名') 标签选择器
2 $('#id名') id选择器
3 $('.class名') 类选择器
4 属性选择器；$('A[属性名]') 获得有属性名的A元素‘；
$('A[属性名=值]') 获得属性名 等于 值的A元素；
$('A[属性名!=值]') 获得属性名 不等于 值的A元素
1 基本选择器
1 标签(元素)选择器
- 1 语法: let l = $("html标签名")
- 2 获得所有匹配标签名称的元素
2 id选择器
- 1 语法: $("#id属性值")
- 2 获得指定的id属性值匹配的元素
3 类选择器
- 1 语法: $(".class的属性值")
- 2 获得与指定的class属性值匹配的元素
2 层级关系选择器
1 并集选择器
- 1 语法: let l = $(选择器1, 选择器2, ...);
- 2 不同选择器之间用逗号隔开
2 后代选择器
- 1 语法: $(父选择器 子选择器 ...);
- 2 空格: 表示子孙后代, 不同选择器之间用空格隔开
- 3 如果把空格改为用">", 则表示父元素的所有子元素, 孙子元素不要
- 4 prev + next: 获取所有跟在prev标签后的第一个同辈的next标签
- 5 prev ~ next: 获取prev后边所有与prev标签同辈的next标签
3 属性选择器
- 语法: let l = $("标签名称[属性='属性值']");
4 复合选择器
- 1 语法: let l = $("标签名称[属性='属性值'][属性='属性值'][...]...");
- 2 可以写多个属性进行筛选标签
3 过滤选择器
1 获取列表标签第一个元素
- 语法: $("li:first")
2 获取偶数索引元素
- 1 语法: $("li:even")
- 2 even 代表偶数
- 3 odd 代表奇数
3 获取指定索引 2 的元素
- 1 语法: $("li:eq(2)")
- 2 eq 代表等于
4 获取大于索引2的元素
- 1 语法: $("li:gt(2)")
- 2 gt代表大于
- 3 lt 代表小于
5 注意: 过滤选择器的过滤条件可以有多个
- 1 例: $("li:gt(2):lt(5)")
- 2 表示所有的 li 标签中的第3个到第5个标签
- 3 不包含第2个, 包含第5个
3 前端和后台的数据传递
1 前后端是如何做数据交互的?
1 通过表单传递参数
2 通过ajax传递参数（有post和get写法）
2 前端如何传给后端json数据?
1 前端向后端传递json数据时，需要使用JSON.stringify()将json对象转化为json字符串
2 ajax中添加参数: contentType : "application/json", type: "POST"
4 前端和后台都是如何解决跨域问题的?
1 前端
1 被请求页面加上下面的代码，最好content填写域名；
<meta http-equiv="Access-Control-Allow-Origin" content="*">
2 利用反向代理实现跨域, 反向代理需要用到nginx
实现原理:
- 原理大体相同，但是处理的端不同，反向代理实在服务器端进行处理。
- 首先修改hosts文件，将域名指向开发者的电脑本身，把自己伪装成服务端，
- 再通过nginx对不同的请求进行转发，把静态资源指向开发者本地电脑的资源，
- 将接口指向实际的服务器
2 第二种方法：在请求控制器加上加上下面的代码；
1 header("Access-Control-Allow-Origin: *");
5 前端如何防止表单重复提交?
1 第一种：用flag标识, 即在表单提交过一次后把标识设置为true, 下次提交时, 如果标识为true, 则不提交，或者可以把flag设置为时间, 进行时间判断, 5分钟内或其他时间内只能提交一次
2 第二种：在onsubmit事件中设置，在第一次提交后使提交按钮失效或将提交按钮隐藏
<form action=”about:blank” method=”post” onsubmit =”getElementById(‘submitInput').disabled=true;return true;” target=”_blank”> <input type=”submit” id=”submitInput”/> </form>
3 使用Post/Redirect/Get
1 Post/Redirect/Get简称PRG，是一种可以防止表单数据重复提交的一种Web设计模式
2 即当用户提交成功之后，执行客户端重定向，跳转到提交成功页面
4 使用session设置令牌
1 产生页面时，服务器为每次产生的Form分配唯一的随机标识号，
并且在form的一个隐藏字段中设置这个标识号，
同时在当前用户的Session中保存这个标识号。
当提交表单时，服务器比较hidden和session中的标识号是否相同，
相同则继续，处理完后清空Session，否则服务器忽略请求
2 注意：恶意用户可利用这一性质，不断重复访问页面，
以致Session中保存的标识号不断增多，最终严重消耗服务器内存。
可以采用在Session中记录用户发帖的时间，
然后通过一个时间间隔来限制用户连续发帖的数量来解决这一问题
6 vue
1 vue的生命周期?
vue生命周期可以分为八个阶段
1 beforeCreate(创建前): 对应的钩子函数为beforeCreate
此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。
2 created(创建后): 对应的钩子函数为created
在这个阶段vue实例已经创建，仍然不能获取DOM元素。
3 beforeMount(载入前): 对应的钩子函数是beforeMount
在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
4 mounted(载入后): 对应的钩子函数是mounted
mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来
5 beforeUpdate(更新前): 对应的钩子函数是beforeUpdate
在这一阶段，vue遵循数据驱动DOM的原则。beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。
6 updated（更新后）: 对应的钩子函数是updated
在这一阶段DOM会和更改过的内容同步。
7 beforeDestroy(销毁前): 对应的钩子函数是beforeDestroy
在上一阶段Vue已经成功的通过数据驱动DOM更新，当我们不再需要vue操纵DOM时，就要销毁Vue,也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。
8 destroyed（销毁后）: 对应的钩子函数是destroyed
在销毁后，会触发destroyed钩子函数
2 vue的指令
1 显示数据(v-text和v-html)
2 数据双向绑定(v-model)
3 事件处理(v-on)
4 循环遍历(v-for)
5 判断语句(v-if和v-show)
6 显示数据(v-bind)
3 vue的双向绑定如何实现?
数据双向绑定(v-model)配合vue中的data
4 vue如何实现自定义事件?
使用 $on(eventName, function(参数){事件处理代码}) 监听事件
使用 $emit(eventName, [参数1], [参数2]) 触发事件
5 vue如何实现监听?
$watch
6 vue如何实现请求?
axios: ajax请求
7 vue的路由跳转方式?
1 router-link标签
- 1. 不带参数
- <router-link :to="{name:'home'}">
- <router-link :to="{path:'/home'}"> //name,path都行, 建议用name
- // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
- 2.带参数
- <router-link :to="{name:'home', params: {id:1}}">
2 this.$router.push
- 跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
- 1. 不带参数
- this.$router.push('/home')
- this.$router.push({name:'home'})
- this.$router.push({path:'/home'})
- 2. query传参
- this.$router.push({name:'home',query: {id:'1'}})
- this.$router.push({path:'/home',query: {id:'1'}})
- 3. params传参
- this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
3 this.$router.replace
- 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
4 this.$router.go(n)
- 向前或者向后跳转n个页面，n可为正整数或负整数
7 get和post有什么区别?
1 Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对用户来说都是不可见的。
2 Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制。
3 Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
4 Get执行效率却比Post方法好。Get是form提交的默认方法。
8 jquery如何获取当前日期?
var myDate = new Date(); var year=myDate.getFullYear(); //获取当前年 var month=myDate.getMonth()+1; //获取当前月 var date=myDate.getDate(); //获取当前日 var h=myDate.getHours(); //获取当前小时数(0-23) var m=myDate.getMinutes(); //获取当前分钟数(0-59) var s=myDate.getSeconds(); //获取当前秒 var now=year+'-'+getNow(month)+"-"+getNow(date)+" "+getNow(h)+':'+getNow(m)+":"+getNow(s);
9 如何给画面中所有的checkbox标签添加一个事件?
var x = document.getElementByTagName("checkbox"). var i; for (i = 0; i < x.length; i++) { x[i].onclick }
10 jquery怎么打开一个模态窗口?
SimpleModal是一个轻量级的jQuery插件，它提供了一个强大的界面模态对话框发展。
SimpleModal提供2个简单的方法来调用一个模式对话框。
(1)作为一个串连的jQuery函数，你可以调用一个jQuery元素modal()函数使用该元素的内容将显示一个模式对话框。
$("#element-id").modal();
(2)作为一个独立的功能，可以通过一个jQuery对象，一个DOM元素，或者一个普通的字符串（可以包含HTML）创建一个模态对话框。
$("#element-id").modal({options});
$.modal("<div><h1>SimpleModal</h1></div>", {options});
11 表单验证是怎么实现的?
用document获取输入框的value可以判断是否为空或者是否为数字
其他类型的校验 比如手机号 邮箱之类的可以用正则表达式校验
先获取表单中输入框的值, 然后可以用正则表达式对值进行验证
12 readonly和disable有什么区别?
1 readonly并没有对input[type="button"]产生作用，按钮效果仍然在，并没有“不可用”；而disabled直接对input[type="button"]的按钮效果产生作用，导致按钮不可点击。
2 Disable设置为true之后是不可以向后台提交数据的，此时可以选择改用readonly进行禁用，或者在提交数据时取消禁用
3 Disable比readonly的使用范围比广，适用文本框、文本域、下拉框、button按钮、单选框…….而readonly只适用于input（text、passwork、textarea）
4 disabled属性可以作用于所有的表单元素, readonly只对可以输入的表单元素有效，表面上可看到的区别就是当这两个词都设置为true时，都为禁用状态，当鼠标移上时使用disable的相关控件时鼠标出现禁用样式，并且不可做任何操作，而Readonly还可以获取文本框里的焦点
5 readonly不可编辑，但可以选择和复制；值可以传递到后台，主要用于表单输入框
6 disabled不能编辑，不能复制，不能选择；值不可以传递到后台，可以用于所有的表单元素
13 如何画一个表格?如何合并单元格?
在<table></table>的标签内只要有几行就要写几个<tr></tr>，而<tr></tr>内又包含着<td></td>
合并单元格, 在td标签中添加属性
colspan:跨列合并单元格, 横向合并
rowspan:跨行合并单元格, 纵向合并
14 如何获取一个文本框的内容?
var textbox= document.getElementById("textbox");
var text = textbox.value;
15 jquery如何获取form表单的值?
把form表单的值序列化成一个Json对象，如{username：admin，password：123}
var params = $('#searchForm').serializeObject();
把form表单的值序列化成一个字符串，如username=admin&password=admin
var params = $('#searchForm').serialize();
将字符串转换为Json对象
JSON.parse(str)
16 前端如何延时调用一个函数?
jQuery.delay(speed,queueName)方法
speed: 可选。规定延迟的速度
可能的值：毫秒, "slow", "fast"
延时时间（duration参数）是以毫秒为单位的，数值越大，动画越慢，不是越快
字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时
queueName: 可选。规定队列的名称
默认是 "fx"，标准效果队列
一次性定时器:
var id = setTimeout(调用方法,毫秒值)
调用方法: 如: "fun()"
循环定时器
var iid = setInterval(调用方法,毫秒值)
17 树形结构数据
1 如何取出树形结构的数据?
首先先遍历所有的节点数据，生成id 和parent_id的关系，然后遍历id 和parent_id的关系，因此将子节点数据放入children 这个集合当中。
2 前端如何显示树形结构数据?
通过js遍历数据对象，拼接成dom字符串，插入到html中
18 js中的this在各种情况下的指向?
1 作为对象的方法调用
当函数作为对象的方法被调用时，this指向该对象
2 作为普通函数调用
当函数不作为对象的属性被调用时，也就是作为普通函数调用，此时的this总是指向全局对象。在浏览器的JavaScript环境中，这个全局对象时window对象
3 作为构造器调用
当用 new 运算符调用函数时，该函数总 会返回一个对象，通常情况下，构造器里的 this 就指向返回的这个对象
19 如何将数据保存到前端?
1 虽然cookie可以存储一些数据，但是仍然存储下面一些缺点
（1）cookie需要在客户端和服务器端之间来回传送，会浪费不必要的资源
（2）cookie的存储大小有限制，对于每个域，一般只能设置20个cookie，每个cookie大小不能超过4KB
（3）cookie的安全性，cookie因为保存在客户端中，其中包含的任何数据都可以被他人访问，cookie安全性比较低
2 Web存储机制
html5中的存储，主要是sessionStorage和localStrorage
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据
由于sessionStorage对象是Storage的一个实例，所以存储数据时可以使用setItem()或者直接设置新的属性来存储数据
当我们要获取某个数据的时候，可以使用getItem来获取数据
如果你只想将数据保存在当前会话下，可以使用sessionStorage, 数据将会临时保存，关闭窗口后则会被删除
localStorage也是Storage的实例，可以像使用sessionStorage一样来使用它
localStorage用于长久的保存整个网站的数据（string类型存储），保存的数据没有过期时间，直到手动删除，
并且localStorage的属性是只读的（不过如果是在浏览器的隐私模式下，它是不可读取的）
保存数据语法：localStorage.setItem("key", "value");
读取数据语法：var lastname = localStorage.getItem("key");
删除数据语法：localStorage.removeItem("key");
20 如何实时刷新页面?
1 页面自动刷新
把如下代码加入<head>区域中
<meta http-equiv="refresh" content="5">
content="20;url=url地址": 如果没有写url, 则默认跳转到当前页面
2 reload
reload 方法，该方法强迫浏览器刷新当前页面。
语法：location.reload([bForceGet])
参数：bForceGet, 可选参数, 默认为 false, 从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")
21 无状态协议
1 什么是http协议无状态协议?
无状态是指协议对于事务处理没有记忆功能。缺少状态意味着，假如后面的处理需要前面的信息，则前面的信息必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要前面信息时，应答就较快
直观地说，就是每个请求都是独立的，与前面的请求和后面的请求都是没有直接联系的是相互隔离的，请求本身包含了相应端为相应这一请求所需的全部信息。1、协议对于事务处理没有记忆能力【事物处理】【记忆能力】
2、对同一个url请求没有上下文关系【上下文关系】
3、每次的请求都是独立的，它的执行情况和结果与前面的请求和之后的请求是无直接关系的，它不会受前面的请求应答情况直接影响，也不会直接影响后面的请求应答情况【无直接联系】【受直接影响】
4、服务器中没有保存客户端的状态，客户端必须每次带上自己的状态去请求服务器【状态】
2 怎么解决http协议无状态协议?
1、通过Cookies保存状态信息
- 通过Cookies，服务器就可以清楚的知道请求2和请求1来自同一个客户端。
2、 通过Session保存状态信息
- Session的实现方式：
- 1、使用Cookie来实现
- 服务器给每个Session分配一个唯一的JSESSIONID，并通过Cookie发送给客户端。
- 当客户端发起新的请求的时候，将在Cookie头中携带这个JSESSIONID。这样服务器能够找到这个客户端对应的Session。
- 2、使用URL回写来实现
- URL回写是指服务器在发送给浏览器页面的所有链接中都携带JSESSIONID的参数，这样客户端点击任何一个链接都会把JSESSIONID带会服务器。如果直接在浏览器输入服务端资源的url来请求该资源，那么Session是匹配不到的。
- Tomcat 对Session的实现，是一开始同时使用Cookie和URL回写机制，如果发现客户端支持Cookie，就继续使用Cookie，停止使用URL回 写。如果发现Cookie被禁用，就一直使用URL回写。jsp开发处理到Session的时候，对页面中的链接记得使用 response.encodeURL() 。
3、通过表单变量保持状态
- 除了Cookies之外，还可以使用表单变量来保持状态，比如Asp.net就通过一个叫ViewState的Input=“hidden”的框来保持状态,比如:
- <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjA0OTM4MTAwNGRkXUfhlDv1Cs7/qhBlyZROCzlvf5U=" />
- 这个原理和Cookies大同小异，只是每次请求和响应所附带的信息变成了表单变量。
4、通过QueryString保持状态
- QueryString通过将信息保存在所请求地址的末尾来向服务器传送信息，通常和表单结合使用，一个典型的QueryString比如:www.xxx.com/xxx.aspx?var1=value&var2=value2
