关于Bootstrap模态框和table互相传值,以及实现图片上传

学习过Boostrap模态窗口,一直想用Bootstrap的模态窗口实现数据的更新操作,最近刚好遇到这个问题,然后就研究了一下。

一、纯数据的传递

如果是纯数据的传递,只要从table表中获取行信息,然后在Bootstrap模态窗口中进行数据的回填即可。

关键代码:






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> 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 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;
	}
..
} 
  


goodQuery.jsp 商品列表查询
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>




    产品查询
    
    
	 
    
    
    
    
    
    


编号 商品名称 商品价格 商品分类 图片 浏览次数 操作
${i.count } ${map.fname } ${map.price } ${map.classify } ${map.fcount }     

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();
		
	}
}


实现效果如图: 关于Bootstrap模态框和table互相传值,以及实现图片上传_第1张图片

关于Bootstrap模态框和table互相传值,以及实现图片上传_第2张图片

关于Bootstrap模态框和table互相传值,以及实现图片上传_第3张图片

提交更改后:

关于Bootstrap模态框和table互相传值,以及实现图片上传_第4张图片

修改成功!


二、带图片的数据传递
可是,当设计图片上传时,上面这种方法就不行了。关键在于将multipart/form-data换成formdata,并且$.ajax()方法中的contentType设置为false。

核心代码:






GoodsQueryServlet.java代码不变、

FoodGoodsDAOImpl.java

@Override
	public boolean updateGood(FoodGoodsBean bean) throws Exception {
		List 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;
	} 
  


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;
		//获取图片的绝对路径
		String img = request.getParameter("img");
		String path = getServletContext().getRealPath("")+"/upload";
		try {
			//从request中获取页面信息
			Map 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 getParameter(HttpServletRequest request) throws UnsupportedEncodingException, FileUploadException {
		Map rsMap = new HashMap<>();
		  
        DiskFileItemFactory factory = new DiskFileItemFactory();   // 创建文件上传核心类
        ServletFileUpload sfu = new ServletFileUpload(factory);  
        
        List itemList = sfu.parseRequest(request); //页面的信息是list上传
        System.out.println(itemList.size());
        for (int i = 0 ; i


goodQuery.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>




    产品查询
    
    
	 
    
    
    
    
    
    


编号 商品名称 商品价格 商品分类 图片 浏览次数 操作
${i.count } ${map.fname } ${map.price } ${map.classify } ${map.fcount }     

效果如图:

关于Bootstrap模态框和table互相传值,以及实现图片上传_第5张图片



关于Bootstrap模态框和table互相传值,以及实现图片上传_第6张图片


关于Bootstrap模态框和table互相传值,以及实现图片上传_第7张图片

更新成功!

各位大牛们,有什么其他的更好的方法,欢迎前来指点。

你可能感兴趣的:(前端)