用Ajax，Tomcat，servlet开发动态网页过程中遇到的问题

前段时间因为练手项目的需要，重新捡起以前学过的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可消除滚动条，但滑动时相对定位的元素会一并被移动了。其它方法也只是换了滚动条的显示位置，直到最后我还是没有找到让滚动条完全不显示的方法，呜呜。