学习过Boostrap模态窗口，一直想用Bootstrap的模态窗口实现数据的更新操作，最近刚好遇到这个问题，然后就研究了一下。
一、纯数据的传递
如果是纯数据的传递，只要从table表中获取行信息，然后在Bootstrap模态窗口中进行数据的回填即可。
关键代码：
<!-- 模态窗口start -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hid互相den="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">修改信息</h4>
</div>
<div class="modal-body">
<table class="table table-hover">
<tr>
<td class="col-md-2">编 号：</td>
<td class="col-md-4"><input type="text" name="id" id="id" disabled /></td>
<td></td>
</tr>
<tr>
<td>商品名称：</td>
<td><input type="text" name="name" id="name" /></td>
<td></td>
</tr>
<tr>
<td>商品价格：</td>
<td><input type="text" name="price" id="price" /></td>
<td></td>
</tr>
<tr>
<td>商品分类：</td>
<td><input type="text" name="classify" id="classify"/></td>
<td></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" name="submit" class="btn btn-primary" οnclick="update()">提交更改</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<script>
function update(){
var id = $('#id').val();
var name = $('#name').val();
var price = $('#price').val();
var classify = $('#classify').val();
$.ajax({
type: "post",
url: "manage/goods/goodUpdate",
data: "name=" + name + "&price="
+ price + "&classify=" + classify + "&id=" + id,
dataType: "html",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
success : function(result) {
location.reload();
}
});
}
</script>GoodsQueryServlet.java
package com.cate.action.goods;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.cate.DAO.FoodGoodsDAO;
import com.cate.DAO.DAOImpl.FoodGoodsDAOImpl;
//食品查询
public class GoodsQueryServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
FoodGoodsDAO dao = new FoodGoodsDAOImpl();
List<Map<String, String>> rslist = new ArrayList<>();
try {
rslist = dao.query();
} catch (Exception e) {
e.printStackTrace();
}
request.setAttribute("rslist", rslist);
request.getRequestDispatcher("manage/goods/goodQuery.jsp").forward(request, response);
//request.getRequestDispatcher("front/meishi.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
}
}
DAO实现了类FoodGoodDAOImpl.java
package com.cate.DAO.DAOImpl;
import java.sql.Connection;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.cate.DAO.FoodGoodsDAO;
import com.cate.bean.FoodDictionariesBean;
import com.cate.bean.FoodGoodsBean;
import com.cate.comm.DBUtil;
//食品管理的DAO实现类
public class FoodGoodsDAOImpl implements FoodGoodsDAO {
..
@Override
public boolean updateGood(FoodGoodsBean bean) throws Exception {
List<Object> parelist = new ArrayList<>();
DBUtil db = new DBUtil();
Connection conn = db.getConnection();
String sql = "UPDATE cate SET fname=?,classify=?,price=? WHERE id=?";
System.out.println(bean.getGname()+","+bean.getClassify()+","+bean.getPrice()+","+bean.getId());
parelist.add(bean.getGname());
parelist.add(bean.getClassify());
parelist.add(bean.getPrice());
parelist.add(bean.getId());
boolean flag = db.excute(sql, parelist, conn);
db.close(conn);
return flag;
}
..
}
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>产品查询</title>
<meta charset="UTF-8">
<!--
<link rel="stylesheet" type="text/css" href="manage/Css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="manage/Css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="manage/Css/style.css" />
<script type="text/javascript" src="manage/Js/jquery.js"></script>
<script type="text/javascript" src="manage/Js/jquery.sorted.js"></script>
<script type="text/javascript" src="manage/Js/bootstrap.js"></script>
<script type="text/javascript" src="manage/Js/ckform.js"></script>
<script type="text/javascript" src="manage/Js/common.js"></script>
-->
<!-- Bootstrap需要JQuery支持，导入JQ开发包 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/manage/bootstrap/JQ/jquery-1.12.4.js"></script>
<!-- Bootstrap所需要的一些组件的*.js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/manage/bootstrap/Bootstrap/js/bootstrap.min.js"></script>
<!-- Bootstrap所需要的一些基本的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/manage/bootstrap/Bootstrap/css/bootstrap.min.css">
<style type="text/css">
.table th, .table td {
text-align: center;
vertical-align: middle!important;
}
</style>
</head>
<body>
<div class=".container">
<div class="row">
<div class="col-md-12">
<table id="table" class="table table-bordered table-hover">
<thead>
<tr>
<th class="col-md-1">编号</th>
<th class="col-md-1">商品名称</th>
<th class="col-md-1">商品价格</th>
<th class="col-md-1">商品分类</th>
<th class="col-md-5">图片</th>
<th class="col-md-1">浏览次数</th>
<th>操作</th>
</tr>
</thead>
<c:forEach items="${rslist}" var="map" varStatus="i">
<tr>
<td>${i.count }</td>
<td>${map.fname }</td>
<td>${map.price }</td>
<td>${map.classify }</td>
<td><img src="http://localhost:80/NewCate/upload/${map.picture}" width="200" height="200" /></td>
<td>${map.fcount }</button></td>
<td><span class="glyphicon glyphicon-edit" id="${i.count}" οnclick="editInfo(this)" data-toggle="modal"
data-target="#myModal" ></span> <span class="glyphicon glyphicon-trash" οnclick="del(${i.count})"></span></td>
</tr>
</c:forEach>
</table>
</div>
</div>
</div>
<!-- 模态窗口start -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">修改信息</h4>
</div>
<div class="modal-body">
<table class="table table-hover">
<tr>
<td class="col-md-2">编 号：</td>
<td class="col-md-4"><input type="text" name="id" id="id" disabled /></td>
<td></td>
</tr>
<tr>
<td>商品名称：</td>
<td><input type="text" name="name" id="name" /></td>
<td></td>
</tr>
<tr>
<td>商品价格：</td>
<td><input type="text" name="price" id="price" /></td>
<td></td>
</tr>
<tr>
<td>商品分类：</td>
<td><input type="text" name="classify" id="classify"/></td>
<td></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" name="submit" class="btn btn-primary" οnclick="update()">提交更改</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
<script>
function del(id){
if(confirm("确定要删除吗？")){
alert(id);
var url = "";
window.location.href=url;
}
}
function editInfo(obj) {
var id = $(obj).attr("id");
var gname = document.getElementById("table").rows[id].cells[1].innerText;
var price = document.getElementById("table").rows[id].cells[2].innerText;
var classify = document.getElementById("table").rows[id].cells[3].innerText;
var imgname = document.getElementById("table").rows[id].cells[4];
var img = imgname.getElementsByTagName("img")[0].src;
$('#id').val(id);
$('#name').val(gname);
$('#price').val(price);
$('#classify').val(classify);
}
function update(){
var id = $('#id').val();
var name = $('#name').val();
var price = $('#price').val();
var classify = $('#classify').val();
$.ajax({
type: "post",
url: "manage/goods/goodUpdate",
data: "name=" + name + "&price="
+ price + "&classify=" + classify + "&id=" + id,
dataType: "html",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
success : function(result) {
location.reload();
}
});
}
</script>GoodsUpdateServlet.java
package com.cate.action.goods;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.cate.bean.*;
import com.cate.DAO.DAOImpl.*;
public class GoodsUpdateServlet extends HttpServlet{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
boolean flag = false;
try {
FoodGoodsBean foodgoods = new FoodGoodsBean();
foodgoods.setId(Integer.parseInt(request.getParameter("id")));
foodgoods.setGname(request.getParameter("name"));
foodgoods.setPrice(Integer.parseInt(request.getParameter("price")));
foodgoods.setClassify(request.getParameter("classify"));
FoodGoodsDAOImpl fd = new FoodGoodsDAOImpl();
//修改数据
flag = fd.updateGood(foodgoods);
} catch (Exception e) {
// TODO Auto-generated catch block
System.out.println("！！！！！！添加失败！！！！！！");
e.printStackTrace();
}
if(flag) {
System.out.println("成功");
} else {
System.out.println("失败");
}
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.flush();
out.close();
}
}
提交更改后：
修改成功！
二、带图片的数据传递
可是，当设计图片上传时，上面这种方法就不行了。关键在于将multipart/form-data换成formdata，并且$.ajax()方法中的contentType设置为false。
核心代码：
<!-- 模态窗口start -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">修改信息</h4>
</div>
<div class="modal-body">
<table class="table table-hover">
<tr>
<td class="col-md-2">编 号：</td>
<td class="col-md-4"><input type="text" name="id" id="id" disabled /></td>
<td></td>
</tr>
<tr>
<td>商品名称：</td>
<td><input type="text" name="name" id="name" /></td>
<td></td>
</tr>
<tr>
<td>商品价格：</td>
<td><input type="text" name="price" id="price" /></td>
<td></td>
</tr>
<tr>
<td>商品分类：</td>
<td><input type="text" name="classify" id="classify"/></td>
<td></td>
</tr>
<tr>
<td>商品图片：</td>
<td>
<input type="file" name="fileimage" id="fileimage" accept="image/gif, image/jpeg"/>
<input type="hidden" name="getimg" id="getimg"/>
</td>
<td></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" name="submit" class="btn btn-primary">提交更改</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
<script>
function del(id){
if(confirm("确定要删除吗？")){
alert(id);
var url = "";
window.location.href=url;
}
}
$(function(){
$('input[name=fileimage]').on('change',function(e){
$('button[name=submit]').on('click',function(e){
var imgData = new FormData();
imgData.append('fileimage',$('input[name=fileimage]')[0].files[0]);
$.ajax({
url: 'manage/goods/goodUpdate?name='+$('#name').val()+'&price='+$('#price').val()
+'&classify='+$('#classify').val()+'&id='+$('#id').val(),
method: 'POST',
data: imgData,
contentType: false,
processData: false,
cache: false,
success : function(result) {
location.reload();
}
});
})
})
})
</script>GoodsQueryServlet.java代码不变、
FoodGoodsDAOImpl.java
@Override
public boolean updateGood(FoodGoodsBean bean) throws Exception {
List<Object> parelist = new ArrayList<>();
DBUtil db = new DBUtil();
Connection conn = db.getConnection();
String sql = "UPDATE cate SET fname=?,classify=?,picture=?,price=? WHERE id=?";
System.out.println(bean.getGname()+","+bean.getClassify()+","+bean.getPrice()+","+bean.getId());
parelist.add(bean.getGname());
parelist.add(bean.getClassify());
parelist.add(bean.getPicture());
parelist.add(bean.getPrice());
parelist.add(bean.getId());
boolean flag = db.excute(sql, parelist, conn);
db.close(conn);
return flag;
}
package com.cate.action.goods;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.cate.bean.*;
import com.cate.DAO.DAOImpl.*;
public class GoodsUpdateServlet extends HttpServlet{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
boolean flag = false;
//获取图片的绝对路径
String img = request.getParameter("img");
String path = getServletContext().getRealPath("")+"/upload";
try {
//从request中获取页面信息
Map<String,Object> map = getParameter(request);
System.out.println("Map=="+map);
File picturedir = new File(path);
File file = new File(picturedir,map.get("fileimage").toString());
//获取图片file，然后写进指定路径picturedir中
FileItem item = (FileItem)map.get("file");
item.write(file);
FoodGoodsBean foodgoods = new FoodGoodsBean();
foodgoods.setId(Integer.parseInt(request.getParameter("id")));
foodgoods.setGname(request.getParameter("name"));
foodgoods.setPrice(Integer.parseInt(request.getParameter("price")));
foodgoods.setPicture(map.get("fileimage").toString());
foodgoods.setClassify(request.getParameter("classify"));
FoodGoodsDAOImpl fd = new FoodGoodsDAOImpl();
//修改数据
flag = fd.updateGood(foodgoods);
} catch (Exception e) {
// TODO Auto-generated catch block
System.out.println("！！！！！！添加失败！！！！！！");
e.printStackTrace();
}
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.flush();
out.close();
}
/**
* 将页面上的信息解析出
* @param request
* @return
* @throws FileUploadException
* @throws UnsupportedEncodingException
*/
private Map<String,Object> getParameter(HttpServletRequest request) throws UnsupportedEncodingException, FileUploadException {
Map<String,Object> rsMap = new HashMap<>();
DiskFileItemFactory factory = new DiskFileItemFactory(); // 创建文件上传核心类
ServletFileUpload sfu = new ServletFileUpload(factory);
List<FileItem> itemList = sfu.parseRequest(request); //页面的信息是list上传
System.out.println(itemList.size());
for (int i = 0 ; i<itemList.size() ; i++){
FileItem fitem = itemList.get(i);
if (fitem.isFormField()){ //非文件的信息封装
String key = fitem.getFieldName();
String value = fitem.getString();
if(value == null ) value = "";
else value = new String(value.getBytes("ISO-8859-1"),"utf-8");
//System.out.println("key=="+key+"value="+value);
rsMap.put(key, value);
}else{
// 获得文件名
String key = fitem.getFieldName();
String fileName = fitem.getName();
rsMap.put(key, fileName);
rsMap.put("file", fitem);
System.out.println("fileName=="+fileName+" "+fitem.getFieldName()+" ");
}
}
return rsMap;
}
}
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>产品查询</title>
<meta charset="UTF-8">
<!--
<link rel="stylesheet" type="text/css" href="manage/Css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="manage/Css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="manage/Css/style.css" />
<script type="text/javascript" src="manage/Js/jquery.js"></script>
<script type="text/javascript" src="manage/Js/jquery.sorted.js"></script>
<script type="text/javascript" src="manage/Js/bootstrap.js"></script>
<script type="text/javascript" src="manage/Js/ckform.js"></script>
<script type="text/javascript" src="manage/Js/common.js"></script>
-->
<!-- Bootstrap需要JQuery支持，导入JQ开发包 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/manage/bootstrap/JQ/jquery-1.12.4.js"></script>
<!-- Bootstrap所需要的一些组件的*.js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/manage/bootstrap/Bootstrap/js/bootstrap.min.js"></script>
<!-- Bootstrap所需要的一些基本的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/manage/bootstrap/Bootstrap/css/bootstrap.min.css">
<style type="text/css">
.table th, .table td {
text-align: center;
vertical-align: middle!important;
}
</style>
</head>
<body>
<div class=".container">
<div class="row">
<div class="col-md-12">
<table id="table" class="table table-bordered table-hover">
<thead>
<tr>
<th class="col-md-1">编号</th>
<th class="col-md-1">商品名称</th>
<th class="col-md-1">商品价格</th>
<th class="col-md-1">商品分类</th>
<th class="col-md-5">图片</th>
<th class="col-md-1">浏览次数</th>
<th>操作</th>
</tr>
</thead>
<c:forEach items="${rslist}" var="map" varStatus="i">
<tr>
<td>${i.count }</td>
<td>${map.fname }</td>
<td>${map.price }</td>
<td>${map.classify }</td>
<td><img src="http://localhost:80/NewCate/upload/${map.picture}" width="200" height="200" /></td>
<td>${map.fcount }</button></td>
<td><span class="glyphicon glyphicon-edit" id="${i.count}" οnclick="editInfo(this)" data-toggle="modal"
data-target="#myModal" ></span> <span class="glyphicon glyphicon-trash" οnclick="del(${i.count})"></span></td>
</tr>
</c:forEach>
</table>
</div>
</div>
</div>
<!-- 模态窗口start -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">修改信息</h4>
</div>
<div class="modal-body">
<table class="table table-hover">
<tr>
<td class="col-md-2">编 号：</td>
<td class="col-md-4"><input type="text" name="id" id="id" disabled /></td>
<td></td>
</tr>
<tr>
<td>商品名称：</td>
<td><input type="text" name="name" id="name" /></td>
<td></td>
</tr>
<tr>
<td>商品价格：</td>
<td><input type="text" name="price" id="price" /></td>
<td></td>
</tr>
<tr>
<td>商品分类：</td>
<td><input type="text" name="classify" id="classify"/></td>
<td></td>
</tr>
<tr>
<td>商品图片：</td>
<td>
<input type="file" name="fileimage" id="fileimage" accept="image/gif, image/jpeg"/>
<input type="hidden" name="getimg" id="getimg"/>
</td>
<td></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" name="submit" class="btn btn-primary">提交更改</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
<script>
function del(id){
if(confirm("确定要删除吗？")){
alert(id);
var url = "";
window.location.href=url;
}
}
$(function(){
$('input[name=fileimage]').on('change',function(e){
$('button[name=submit]').on('click',function(e){
var imgData = new FormData();
imgData.append('fileimage',$('input[name=fileimage]')[0].files[0]);
$.ajax({
url: 'manage/goods/goodUpdate?name='+$('#name').val()+'&price='+$('#price').val()
+'&classify='+$('#classify').val()+'&id='+$('#id').val(),
method: 'POST',
data: imgData,
contentType: false,
processData: false,
cache: false,
success : function(result) {
location.reload();
}
});
})
})
})
</script>效果如图：
更新成功！
各位大牛们，有什么其他的更好的方法，欢迎前来指点。
8720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
