前段时间因为练手项目的需要,重新捡起以前学过的tomcat和servlet开发技术,项目做的过程中真的遇到了很多意想不到的奇奇奇怪的问题,项目做完后总结起来这种看似不起眼但是能让人改bug改到崩溃的原因还是因为平时练习的少了(自觉面壁三秒后再次回来做总结🙃)
废话有点多,接下来说重点
练手的项目是做一个动态的网站,写好前端页面的布局后从本地数据库MySql拿到数据然后通过Ajax动态加载到页面中。步骤大概如下:
1. 前端使用Ajax向后台发送请get请求(请求返回Json格式的数据)。
2. 后台接受请求后访问数据库取得数据。
3. 后台讲数据封装成json格式回传前端。
4. 前端通过循环将得到的Json格式的数据与html代码进行拼接,最后展示到页面上。
问题1:前后台数据连接出现问题
后台通过数据输出显示,确定已经接收到前端的请求,并从数据库取得数据返回给了前端界面。但是前端界面一直返回error。
问题所在:后台返回的json格式数据为字符串类型而非json格式。
解决方法:将Ajax里的dataType:'json’的json格式改为text类型。
问题2:后台数据请求成功,前端界面也显示得到正确数据,但页面没有渲染出数据
问题所在:没有给动态渲染的div块添加对应的id名称,导致前端界面获取到的数据不知道应该渲染到页面的哪个位置。
问题3:后台回传数据显示:成功从数据库取出数据并成功返回给到前端,但是前端的照片显示不出
问题所在:通过将前端得到的数据alert显示出来后,发现前端得到的照片路径发生了乱码情况。
原因:存进数据库的照片路径应该为左斜杠/,问题代码中照片路径为右斜杠\因而返回前端的时候路径发生乱码情况。
问题4:form表单中的所有button都会触发表单的提交事件
问题描述:页面中的返回按钮没有触发返回事件,却触发了表单的提交。
原因:form表单中的button默认的类型是type=‘submit’,点击必然会跳转页面,如果表单的action 为空也会跳转到自己的页面,即效果为刷新当前页面。
解决方法:阻止表单默认提交事件,最简单方法是通过指定button 的类型,即将默认的type="submit"改为type=“button”。
问题5:response.sendRedirect() 传中文参数的问题
问题描述: response.sendRedirect跳转页面传参数的过程发现,如果参数中带有中文,在传输前不进行处理的话,在接收页面里是取不到中文参数的!!
问题代码
前端得到的数据
解决方法:在传输前对带有中文的参数进行转义。(中文数据的具体处理方法请自行查阅~不过开发过程文件名之类的东西尽量用英文命名,不然真的会出现很多奇奇怪怪的bug)
问题6:横向滚动的设置
因为项目同时做了PC端和移动端界面的开发,为了符合手机界面的大小,将原本水平排放的内容做成横向滚动的形式。
问题描述:设置父元素宽度由子元素撑开,但是子元素超过手机宽度的部分被隐藏掉了,即没有出现滚动条。
界面代码如下:
解决方法:父元素不换行,超过宽度撑开
子元素设定宽度
文字部分设置超过宽度换行
尚未解决:试过很多种方法,都不能让滚动条如愿的在滚动内容块的时候不出现。
overflow-x:visible可消除滚动条,但滑动时相对定位的元素会一并被移动了。其它方法也只是换了滚动条的显示位置,直到最后我还是没有找到让滚动条完全不显示的方法,呜呜。