textarea输入的内容保存到数据库,用div显示

项目中遇到需求,要求用户个人简介在前端无刷新编辑并保留换行。通过编辑div并保存html到数据库实现,但使用dotdotdot.js插件截取内容时出现问题。为解决换行和安全问题,改用textarea编辑,然后通过htmlspecialchars处理特殊字符,存入数据库。在显示时使用nl2br将换行恢复,确保内容正确显示且防止脚本注入。
摘要由CSDN通过智能技术生成

背景:在近期的项目中,有这样一个需求:用户的个人简介,前台无刷新编辑。那么这个问题是不难的,实现方式:

1.可编辑的div

2.ajax请求保存div中输入的内容

到这里我相信很多朋友都是一目了然,这并不是很难的啊,

但是问题来了,项目需求,用户在填写个人简介的时候,输入的换行也要相应的保存起来,于是宝宝查看了下可编辑的div输入换行之后是什么格式,

宝宝发现,当你按一次回车,输入内容之后,html会自动给你生成一个div,那么你按了回车之后输入的内容都会放到这块div中,这个时候宝宝是很开心的,

妈蛋啊,直接保存可编辑div的html到数据库,显示的时候不加任何处理,直接显示html,该有的换行都有,原来什么样子就是什么样子啊(这样保存html的方式还可以避免脚本注入的问题)。

那么到了这里,我觉得很多人都会认为,这个问题已经解决了,但是万万没想到,故事一波三折,个人简介允许1000字符,超过三行需要截取三行,然后用“...查看全部”代替,这个时候,项目组使用了一个吊死级别的插件,dotdotdot.js插件,这个插件差点要了宝宝半条名,(我要吐槽一下:真的是他妈的八字的插件啊),以往不专业的截取字符串,都会用subString等函数截取,但是事实上是不合理的,(窗口缩小等情况会出现问题),而这款插件(或

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
这三步的实现可以参考以下的步骤: 1. 在表格下方,创建一个表单,包含商品名称、价格和商品信息的输入框,以及一个提交按钮。表单的action属性应该指向一个Servlet或者其他后端处理程序的URL。 ```html <form method="post" action="AddProductServlet"> <label for="name">商品名称</label> <input type="text" id="name" name="name"> <label for="price">价格</label> <input type="number" id="price" name="price"> <label for="info">商品信息</label> <textarea id="info" name="info"></textarea> <input type="submit" value="提交"> </form> ``` 2. 在服务器端,创建一个名为AddProductServlet的Servlet,并在其doPost方法中获取表单数据,并将其保存数据库表中。可以使用JDBC或其他ORM框架来实现对数据库的操作。保存成功后,重定向到shopadmin.jsp页面,并在重定向时将一个参数success设置为true,以便在shopadmin.jsp页面中显示保存成功的消息。 ```java public class AddProductServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter("name"); int price = Integer.parseInt(request.getParameter("price")); String info = request.getParameter("info"); // 将商品信息保存数据库表中 ProductDAO dao = new ProductDAO(); Product product = new Product(name, price, info); dao.addProduct(product); // 重定向到shopadmin.jsp页面,并设置一个success参数 response.sendRedirect("shopadmin.jsp?success=true"); } } ``` 3. 在shopadmin.jsp页面中,检查参数success是否存在,并且为true。如果是,则显示保存成功的消息,并重新载入商品列表,以显示新添加的商品。可以使用JSTL标签库从数据库中获取商品信息,并将其显示在表格中。 ```html <c:if test="${param.success == 'true'}"> <div class="success-message">添加商品成功!</div> </c:if> <table> <thead> <tr> <th>商品名称</th> <th>价格</th> <th>商品信息</th> </tr> </thead> <tbody> <c:forEach var="product" items="${products}"> <tr> <td>${product.name}</td> <td>${product.price}</td> <td>${product.info}</td> </tr> </c:forEach> </tbody> </table> <form method="post" action="AddProductServlet"> <!-- 表单输入框 --> <input type="submit" value="提交"> </form> ``` 需要注意的是,以上代码仅供参考,具体的实现方式可能因项目的具体需求而有所不同。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值