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

寻找的资料

一、

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

 <style>.readonly input{border:none}</style>
<div id="dvInput" class="readonly">text1：<input type="text" readonly value="text1" /><br />text2：<input type="text" readonly value="text2" /><br />
</div>
<input type="button" value="编辑" οnclick="btnClick(this)" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>function btnClick(btn) {var toEdit = btn.value == '编辑';$('#dvInput')[toEdit ? 'removeClass' : 'addClass']('readonly').find(':input').attr('readonly', toEdit ? false : true);btn.value = toEdit ? '保存' : '编辑';if (!toEdit) {//保存的ajax代码//..}}
</script>

二、

html页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head><!-- 在线引入jQery，这里也可以换成引入本地的jQuery --><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页面

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script><script>function btnClick1(btn) {//联系方式var toEdit = btn.value == '编辑';$('#dvInput1')[toEdit ? 'removeClass' : 'addClass']('readonly').find(':input').attr('readonly', toEdit ? false : true);btn.value = toEdit ? '保存' : '编辑';if (!toEdit) {//保存的ajax代码var value1 = $("#value1").val();var value2 = $("#value2").val();// 使用ajax发送请求$.ajax({url: "/UpdateUserInfServlet", // 要访问的地址，这里访问的是servlet映射地址cache: false,  // 是否缓存data: {"phoneNumber":value1,"address":value2,"name":"address"},// 相当于地址栏后面的参数success: function(result){ // 访问成功后，执行的方法，参数是后台的结果// 将获取到的数据写入span标签// $("#sp").text(result);$("#value1").text(result)}})}}function btnClick2(btn) {//联系地址var toEdit = btn.value == '编辑';$('#dvInput2')[toEdit ? 'removeClass' : 'addClass']('readonly').find(':input').attr('readonly', toEdit ? false : true);btn.value = toEdit ? '保存' : '编辑';if (!toEdit) {//保存的ajax代码var value1 = $("#value1").val();var value2 = $("#value2").val();// 使用ajax发送请求$.ajax({url: "/UpdateUserInfServlet", // 要访问的地址，这里访问的是servlet映射地址cache: false,  // 是否缓存data: {"phoneNumber":value1,"address":value2,"name":"address"},// 相当于地址栏后面的参数success: function(result){ // 访问成功后，执行的方法，参数是后台的结果// 将获取到的数据写入span标签// $("#sp").text(result);$("#value2").text(result)}})}}</script><style>.readonly input{border:none}</style>

<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 {@Overrideprotected 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("更新失败");}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}

最终效果：

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

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

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


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

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

jsp页面之间传中文参数显示乱码问题的解决
jsp页面之间传中文参数显示乱码问题的解决参考文章: (1)jsp页面之间传中文参数显示乱码问题的解决 (2)https://www.cnblogs.com/sllzhj/p/9673628.htm ...
点击编辑框全选内容java,js实现鼠标点击文本框自动选中内容的方法
本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候, ...
PHP实现单击“添加”按钮增加一行表单项，并将所有内容插入到数据库中
PHP实现单击"添加"按钮增加一行表单项,并将所有内容插入到数据库中效果图: html+jquery: <html> <head> <meta ht ...
添加与编辑共用一个jsp页面时，控制按钮的显示与隐藏
场景添加与编辑共用一个jsp页面,后台action传过来 op参数,如果是edit则执行编辑,如果是add,则执行添加. 如果是编辑页面则显示充值按钮,如果是添加页面则不显示. 实现后台actio ...
原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏...
<!DOCTYPE html> <html style="font-size: 24px"> <head><title>js点击按钮 ...
jsp逐行打印mysql查询表格,jsp页面怎么写循环语句显示数据库中所有数据到网页表格中...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServ ...
jsp页面，在浏览器端显示时会出现乱码解决方法
这种乱码的原因是没有在页面里指定使用的字符集编码,JSP页面中出现了中文字符,而默认的ISO-8859-1字符集中无中文字符,解决方法:只要在页面开始地方用下面代码指定字符集编码即可,在JSP页面中指 ...
点击list view中一行内容可以在combox中显示_java版飞机大战小游戏详细教程（零基础小白也可以分分钟学会！）...
一:游戏展示飞机大战小游戏我们都玩过,通过移动飞机来打敌机,这里给大家展示一下游戏成果:呜呜呜由于gif只能上传5M大小,所以就不能给大家展示操作了,如果大家有兴趣可以自己自己做出来再玩哟. 这里面 ...
JS 文本框内输入内容添加在页面与删除
文本框内输入文字,点击添加按钮·就可添加至页面内,点击删除即可依次删除 <!DOCTYPE html> <html><head><meta charset=& ...

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

寻找的资料

一、

二、

我的最终版本

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

最新文章

热门文章