前端项目里常见的十种报错及其解决办法

摘要:
错误6:未标记引用错误:$isnotdefinedUncaughtReferenceError:$isnotfinedUnaughtReferenceError,如果将其更改为jsp页面,则无法找到路径。此时,它变成了一个幻影。png格式。此时,您只需将以下代码添加到文件:Picture。png解决方案:在和˂Base href=“”˃错误8:未捕获类型错误:$(…)。工具提示不起作用未捕获类型错误:$(…)。tooltip在HTMLDocument.<anonymous>atatObject中不起作用。fireWith[asrolveWith]at函数。readyatHTML文档。S图片。png原因:包括两个不同版本的jQueryUI。这可能导致冲突。

错误一:Uncaught TypeError: Cannot set property 'onclick' of null

at operate.js:86
前端项目里常见的十种报错及其解决办法第1张
图片.png

原因:
当js文件放在head里面时,如果绑定了onclick事件,就会出现这样的错误,是因为W3School的写法是浏览器先加载完按钮节点才执行的js,所以当浏览器自顶向下解析时,找不到onclick绑定的按钮节点,于是报错。因此,需要把js文件放在底部加载,就会避免该问题。

解决办法:用window.onload=function(){}包裹起来就不会出现这个错误了,因为浏览器要先加载节点才可以用onclick。

错误二:Uncaught TypeError: $(...).none is not a function

at HTMLLIElement.<anonymous> (operate.js:66)
at HTMLLIElement.dispatch (jquery.min.js:5)
at HTMLLIElement.y.handle (jquery.min.js:5)
前端项目里常见的十种报错及其解决办法第2张
图片.png

Query 1.9 比之前的版本做了很大的调整,很多函数都不被支持
none()方法已经失效,需要改成以下方式

错误三:Failed to load resource: the server responded with a status of 500 (Internal Server Error)

前端项目里常见的十种报错及其解决办法第3张
图片.png

只是注释了js里面隔行换色的代码,表格就加载不出来了,按f12键查看控制台network,按F5刷新如下


前端项目里常见的十种报错及其解决办法第4张
图片.png

对于这种莫名其妙,上一秒还能正常显示,这一秒就出现了错误的bug,我通常重启一下编辑器,重启一下浏览器,就正常了,不要问我为什么,我拿这种蜜汁bug也没有办法

错误四:最常见:Failed to load resource: the server responded with a status of 404 (Not Found)

前端项目里常见的十种报错及其解决办法第5张
图片.png

文件没有被找到,说明文件引用的路径有问题,或文件损坏

错误五:tomcat启动报错处理:Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use

前端项目里常见的十种报错及其解决办法第6张
图片.png

8080端口被占用
将配置文件里面被占用的端口名改掉:


前端项目里常见的十种报错及其解决办法第7张
图片.png

做一个项目的时候 ,控制台总是会出现各种bug,其实不用慌张,终结起来也就几种类型的错误,在开发中每次遇到错误都善于总结,下次在看到就会胸有成竹知道是什么情况了,以下是在开发过程中总结的一些错误以及错误的解决方法。

报错六:Uncaught ReferenceError: $ is not defined
Uncaught ReferenceError: $ is not defined
Uncaught ReferenceError: jQuery is not defined
前端项目里常见的十种报错及其解决办法第8张
图片.png

错误原因:文件加载的顺序不对,jQuery文件的顺序要在前面


前端项目里常见的十种报错及其解决办法第9张
图片.png

方法:把jQuery文件写在所有script文件前面


前端项目里常见的十种报错及其解决办法第10张
图片.png
报错七:jsp页面相对路径和绝对路径的问题:

正常路径:html里面的../../,改成jsp页面就找不到路径了,这个时候成了这个鬼样子

前端项目里常见的十种报错及其解决办法第11张
图片.png

这时候,只需要在文件里面加入这段代码:


前端项目里常见的十种报错及其解决办法第12张
图片.png

解决办法:在<html>和<head>之间插入以下代码

<%
    String path = request.getRequestURI();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<base href="<%=basePath%>">
报错八:Uncaught TypeError: $(...).tooltip is not a function
Uncaught TypeError: $(...).tooltip is not a function
    at HTMLDocument.<anonymous> (app.js:42)
    at l (jquery.min.js:4)
    at Object.fireWith [as resolveWith] (jquery.min.js:4)
    at Function.ready (jquery.min.js:4)
    at HTMLDocument.S (jquery.min.js:4)
前端项目里常见的十种报错及其解决办法第13张
图片.png

原因:包括两个不同版本的jQuery UI。这可能会导致冲突。尝试删除

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

解决办法:
编辑:

<script>
jQuery( document ).ready(function( $ ) {
   $('.hasTooltip').tooltip();
});
</script>

像这样使用它,解决了我的问题!

报错九:Uncaught TypeError: $(...).sortable is not a function
Uncaught TypeError: $(...).sortable is not a function
    at HTMLDocument.<anonymous> (dashboard.js:12)
    at l (VM552 jquery.min.js:4)
    at Object.fireWith [as resolveWith] (VM552 jquery.min.js:4)
    at Function.ready (VM552 jquery.min.js:4)
    at HTMLDocument.S (VM552 jquery.min.js:4)

报错十:bootstrap.min.js:7 Uncaught Error: Bootstrap requires jQuery
bootstrap.min.js:7 Uncaught Error: Bootstrap requires jQuery
    at bootstrap.min.js:7
前端项目里常见的十种报错及其解决办法第14张
图片.png

解决方案:解决方案:将jquery.min.js放在bootstrap.min.js文件之前引用,bootstrap.min.css文件在整两个文件前后引用都无妨(测试多次)。

原文作者:祈澈姑娘
原文链接:https://www.jianshu.com/u/05f416aefbe1
创作不易,转载请告知

90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫:【编程微刊】


免责声明:文章转载自《前端项目里常见的十种报错及其解决办法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇CAD中批量打印oracle查询连接数、并发数、共享池大小下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Web 研发模式的演变

前不久徐飞写了一篇很好的文章:Web 应用的组件化开发。本文尝试从历史发展角度,说说各种研发模式的优劣。 一、简单明快的早期时代 可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发。页面由 JSP、PHP 等工程师在服务端生成,浏览器负责展现。基本上是服务端给什么浏览器就展现什么,展现的控制在 Web Ser...

Node.js躬行记(4)——自建前端监控系统

这套前端监控系统用到的技术栈是:React+MongoDB+Node.js+Koa2。将性能和错误量化。因为自己平时喜欢吃菠萝,所以就取名叫菠萝系统。其实在很早以前就有这个想法,当时已经实现了前端的参数搜集,只是后台迟迟没有动手,也就拖着。 目前完成的还只是个雏形,仅仅是搜集了错误和相关的性能参数。 后台样式采用了封装过的matrix。 分析功能还很薄弱...

Web前端开发工程师编程能力飞升之路

【背景】 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧;如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧;如果你是四五年的前端开发高手,没有难题能难得住你的寂寞高手,来看这篇文章吧; web前端研发工程师,在国内是一个朝阳职业,自07-08年正式有这个职业以来,也不过三四年的时间。这个领域没有学校的正规教育,没有...

前端开发要注意的浏览器兼容性问题整理

首先,我们要知道,为什么各浏览器会产生兼容性问题?     产生这个问题的主要原因是市面上的浏览器的种类很多,但由于不同的浏览器的内核不一致,从而导致各个浏览器对网页的解析就产生了差异。解决浏览器兼容性问题,还是从三个方面入手:html部分、css部分、js部分。       1、html部分       a、最突出也是最容易想到的就是高版本的浏览器用了低...

最全前端资源汇集

前些日子从@张鑫旭微博处得一份推荐 (Front-end-tutorial),号称 最全的资源教程 -前端涉及的所有知识体系;有粗略查看,果然“叹为观止”,至少比想象中涉猎丰富许多;果断有Fork了来:Front-end-tutorial;本就有收藏&分享欲,这种事儿早期也想做了,勘叹见识未广而深;幸遇这良心收集,得以借他人之酒杯,一浇我心之夙愿块...

css选择符的渲染效率

  CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间。   我们先来看一下safari和webkit的架构师David Hyatt的两段话: 样式系统从最右边的选择符开始向左...