在jsp页面中点击编辑按钮，显示input边框，可编辑，点击保存按钮，输入框消失，不可编辑，并将文本框中的内容保存到数据库中

比眉伴天荒 2023-10-01 08:43 10阅读 0赞

### 寻找的资料 ###

#### 一、 ####

默认readonly不允许编辑。点击编辑的时候加上边框样式，去掉readonly属性

#### 二、 ####

**html页面：**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
        
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
          
                $("#name").blur(function() {
          
                    var value = $("#name").val();
    
                    // 使用ajax发送请求
                    $.ajax({
          
                          url: "AjaxServlet", // 要访问的地址，这里访问的是servlet映射地址
                          cache: false,  // 是否缓存
                          data: "name="+value, // 相当于地址栏后面的参数
                          success: function(result){
           // 访问成功后，执行的方法，参数是后台的结果
                            // 将获取到的数据写入span标签
                            $("#sp").text(result);
                          }
                    })
    
                });
    
            })
        </script>
    <body>
    
        <form action="AjaxServlet" method="post">
            姓名：<input type="text" id="name" > <span id="sp"></span>
        </form>
    
    </body>
    </html>

**后台servlet页面**

import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebServlet("/AjaxServlet")
    public class AjaxServlet extends HttpServlet {
        
        private static final long serialVersionUID = 1L;
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            request.setCharacterEncoding("utf-8");
            String name = request.getParameter("name");
    
            System.out.println("接受到前台请求.........");
    
            // 模拟读取数据库
            if(name.equals("test")) {
        
                response.getWriter().print("ok"); // 将结果返回到前端
            }else {
        
                response.getWriter().print("bad"); // 将结果返回到前端
            }
        }
    
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            doGet(request, response);
        }
    
    }

### 我的最终版本 ###

**JSP页面**

<li><span>用户名：</span>${sessionScope.userInfomation.username}</li>
    
                    <li><span>联系方式：</span>
                        <div id="dvInput1" class="readonly">
                            <input type="text" id="value1" readonly 		value=${sessionScope.userInfomation.phoneNumber} />
                        </div>
                        <input type="button" value="编辑" οnclick="btnClick1(this)" />
    <%--                    ${sessionScope.userInfomation.phoneNumber}--%>
                    </li>
                    <li><span>联系地址：</span>
                        <div id="dvInput2" class="readonly">
                            <input type="text" id="value2" readonly value=${sessionScope.userInfomation.address} />
                        </div>
                        <input type="button" value="编辑" οnclick="btnClick2(this)" />
    <%--                    ${sessionScope.userInfomation.address}--%>
                    </li>

**servlet页面**

import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    /**
     * <p>
     *
     * </p>
     *
     * @autor:lzj
     * @date:2021/12/7
     */
    public class UpdateUserInfServlet extends HttpServlet {
        
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            String phoneNumber = req.getParameter("phoneNumber");//html页中电话text框中的内容
            String address = req.getParameter("address");//html页中地址text框中的内容
            String name = req.getParameter("name");//用来判断是修改的哪个内容
            int userId = (int) req.getSession().getAttribute("userId");//用户的id
            //System.out.println(phoneNumber);
            //System.out.println(address);
            //System.out.println(name);
            //System.out.println(userId);
            UserServiceImpl userService = new UserServiceImpl();
            UserDao userDao = new UserDaoImpl();
            userService.setUserDao(userDao);
            UserInfomation userInfomation=new UserInfomation(phoneNumber,address,userId);
            int i = userService.updateUserInf(userInfomation);
            if(i>0){
        
                if(name.equals("phoneNumber")){
        
                    resp.getWriter().print(phoneNumber);
                }else if (name.equals("address")){
        
                    resp.getWriter().print(address);
                }
            }else{
        
                resp.getWriter().print("更新失败");
            }
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            doGet(req, resp);
        }
    }

**最终效果：**

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAMTEyM-OAgg_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

点击编辑即可对文本框中的内容进行更改

点击编辑后按钮的值会变为保存

void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException \{  
doGet(req, resp);  
\}  
\}

**最终效果：**
    
    [外链图片转存中...(img-nAkVwAKE-1638885082316)]
    
    点击编辑即可对文本框中的内容进行更改
    
    点击编辑后按钮的值会变为保存
    
    点击保存后文本框内的值会通过axaj传入servlet并进行局部更新，同时也会更新数据库中的内容

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAMTEyM-OAgg_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/e5aa74e0560640e3845f525cc2b91172.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMTEyM-OAgg==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center