触发模态框按钮，一定要加type=“button”，否则Ajax成功取到数据模态框也会一闪而过
<button type="button" class="btn btn-primary btn-xs" data-toggle="modal"data-target="#updatamodal" onclick="toUpdate(${c.id})">修改</button>
<!--修改模态框 --><div class="modal fade" id="updatamodal" tabindex="-1" role="dialog"aria-labelledby="exampleModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="exampleModalLabel">修改信息</h4></div><div class="modal-body"><form action=""><div class="form-group"><label for="username" class="control-label">姓名:</label> <inputtype="text" class="form-control" id="username"></div><div class="form-group"><label for="password" class="control-label">密码:</label> <inputtype="password" class="form-control" id="password"></div><div class="form-group"><label for="balance" class="control-label">余额:</label> <inputreadonly="readonly" type="text" class="form-control"id="balance"></div><div class="form-group"><label for="phone" class="control-label">电话:</label> <inputtype="text" class="form-control" id="phone"></div><div class="form-group"><label for="gender" class="control-label">性别:</label><br /> <inputtype="radio" class="control-label" id="male" value="男"name="gender" />男 <input type="radio" class="control-label"id="female" value="女" name="gender" />女</div><div class="form-group"><label for="idcard" class="control-label">身份证:</label> <inputtype="text" class="form-control" id="idcard"></div><div class="form-group"><label for="registtime" class="control-label">注册时间:</label> <inputreadonly="readonly" type="text" class="form-control"id="registtime"></div></div></form><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="关闭">Close</button><button type="button" class="btn btn-primary">修改</button></div></div></div></div><!--模态框 end-->
Ajax部分
<script type="text/javascript">// 通过id获取修改的客户信息function toUpdate(id) {$.ajax({type: "get",dataType: "json",url: "<%=basePath%>usersevlet?op=tosearche",data: {"id": id},success: function(data) {$("#username").val(data.username);$("#password").val(data.password);$("#phone").val(data.phone);$("#idcard").val(data.idcard);$("#balance").val(data.balance);$("#registtime").val(data.registtime);$("input[name=gender][value="+data.gender+"]").attr("checked",true);},error: function() {alert(data);alert("出错了");}});}</script>
servlet部分
private void tosearche(HttpServletRequest req, HttpServletResponse resp) throws IOException {String id = req.getParameter("id");System.out.println(id);User user = service.queryOne(id);System.out.println("====="+user.getUsername());PrintWriter out = resp.getWriter();if(user!=null){Gson gson = new Gson();String json = gson.toJson(user);out.print(json);}out.flush();out.close();}
JDBC部分
public User queryOne(String id) {String sql = "select id,username,password,balance,phone,gender,idcard,registTime from t_user where id=?";User user = null;CachedRowSet crs;try {crs = DBUtils.executesQuery(sql, id);if (crs.next()) {user = new User(crs.getLong("id"), crs.getString("username"),crs.getString("password"),crs.getBigDecimal("balance"), crs.getString("phone"),crs.getString("gender"), crs.getString("idcard"),crs.getDate("registtime"));}} catch (Exception e) {e.printStackTrace();}return user;}
效果图
