寻找的资料
一、
默认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="/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="/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="/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript" src="/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:/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边框 可编辑 点击保存按钮 输入框消失 不可编辑 并将文本框中的内容保存到数据库中
