javaweb开发jsp页面一次性保存多条数据，批量保存数据(json版)！

最新推荐文章于 2024-07-01 02:54:45 发布

程宇寒

最新推荐文章于 2024-07-01 02:54:45 发布

阅读量4.2k

点赞数 4

文章标签： javaweb开发 jsp json 一次性保存多条数据批量保存数据

本文链接：https://blog.csdn.net/czh500/article/details/80471017

版权

javaweb开发jsp页面一次性保存多条数据，批量保存数据(json版)！

先看下我们要完成什么样的效果，看下图：一次性保存多条数据(即批量保存数据)！

大家也可以看看我的另一篇批量保存数据的文章，该篇文章的批量保存比较复杂，没有json的简单方便！

一次性保存多条数据(批量保存)，比较方便、简便的方式就是使用Json,当然你可能还有其他方式!但是，这里我就用json来做批量保存！

tableDataJson.jsp页面(tableDataJson.jsp页面中，有一个隐藏域，把封装好的json字符串放到隐藏域中，然后提交到后台的servlet中，在servlet中拿到封装好的json字符串后转换成一个一个的实体对象，得到实体对象后就保存到数据库中，反正后台拿到实体对象后想怎么处理看大家自己的需要！)

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表格中的的多行数据使用Json格式提交到服务器端</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/body.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/mark.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/input2.css">
	<style type="text/css">
input {
	width: 300px !important;
	height: 30px;
	border: 2px solid #8E388E;
	border-radius: 4px; /*设置边框的4个直角变成圆角有弧度*/
	font-weight: bold; /*文本框中的文本字体加粗*/
	color: black;
	background-color: #F2F2F2;
}

input[type=button], input[type=submit]{
	width: auto;
	color: white;
	background-color: #8E388E;
}

</style>
</head>
<body onload="setShowTextDivNodeValue()">
<center>
<h3>表格中的多行数据使用Json格式提交到服务器端</h3>
<div class="testDiv3" id="showText" style="height: auto;">
</div>
<br>
	<form id="tableDataJson" action="${pageContext.request.contextPath}/TableDataJson" method="post">
	<input id="submitServerButton" type="submit" value="表格中多行数据使用Json格式提交到服务器端">
	<input type="button" value="+(增加一行)" onclick="addRow()">
	(为了测试方便,把文本框全部设置为只读)
	<input id="jsonDataToServer" name="jsonDataToServer" type="hidden" value="">
		<table id="fieldTable">
			<tr id="tr1">
				<th>字段名</th>
				<th>字段类型</th>
				<th>字段长度</th>
			</tr>
			<tr id="tr2">
				<td><input readonly="readonly" id="fieldName_1" type="text" name="fieldName_1" value="姓名"></td>
				<td><input readonly="readonly" id="fieldType_1" type="text" name="fieldType_1" value="字符串"></td>
				<td><input readonly="readonly" id="fieldLength_1" type="text" name="fieldLength_1" value="40"></td>
			</tr>
			<tr id="tr3">
				<td><input readonly="readonly" id="fieldName_2" type="text" name="fieldName_2" value="籍贯"></td>
				<td><input readonly="readonly" id="fieldType_2" type="text" name="fieldType_2" value="字符串"></td>
				<td><input readonly="readonly" id="fieldLength_2" type="text" name="fieldLength_2" value="120"></td>
			</tr>
		</table>
	</form>
	<br>
<div class="testDiv3" id="showText2">
</div>
<br><br><br><br><br><br>
</center>
</body>
<script type="text/javascript">

	var message = '<font color="red">表格中的多行数据封装成Json格式如下，把这个Json字符串放在表单隐藏域中提交到servlet服务器端解析处理</font><br>';
	//封装成json格式的数组或集合，最终把这个json格式的数组对象或集合对象转换为json字符串，然后提交到服务器端servlet中解析处理
	var jsonData = [];
	var dataRow1 = {  
			fieldName : document.getElementById("fieldName_1").value,  
			fieldType : document.getElementById("fieldType_1").value,  
			fieldLength : document.getElementById("fieldLength_1").value  
        } 
	var dataRow2 = {  
			fieldName : document.getElementById("fieldName_2").value,  
			fieldType : document.getElementById("fieldType_2").value,  
			fieldLength : document.getElementById("fieldLength_2").value  
        }
	jsonData.push(dataRow1);  
	jsonData.push(dataRow2);
	
	//追加一行
	function addRow(){
		var tableNode =	document.getElementById("fieldTable");
		var trNodeList = tableNode.getElementsByTagName("tr");
//		for (var index = 0; index < trNodeList.length; index++) {
//			var tdNodeList = trNodeList[index].getElementsByTagName("td");
//			for (var i = 0; i < tdNodeList.length; i++) {
//					alert(tdNodeList[i].id);
//			}
//		}
		//得到最后一行(tr)的所有td
	var tdNodeList = trNodeList[trNodeList.length - 1].getElementsByTagName("td");
		var td_input_name = tdNodeList[0].getElementsByTagName("input")[0].name;
		var strIndex = td_input_name.indexOf("_");
		var number = td_input_name.substring(strIndex + 1)
		var trNode = document.createElement("tr");
		number++;
		var tdText = '';
		var td1_input_fieldName = '<td><input readonly="readonly" id="fieldName_' + number + '" type="text" name="fieldName_' + number + '" value="字段名' + number + '"></td>';
		var td2_input_fieldType = '<td><input readonly="readonly" id="fieldType_' + number + '" type="text" name="fieldType_' + number + '" value="字段类型' + number + '"></td>';
		var td3_input_fieldLength = '<td><input readonly="readonly" id="fieldLength_' + number + '" type="text" name="fieldLength_' + number + '" value="字段长度' + number + '"></td>';
		tdText = td1_input_fieldName + td2_input_fieldType + td3_input_fieldLength;
		trNode.innerHTML = tdText;
		tableNode.appendChild(trNode);
		//alert("追加一行");
		var dataRow = {  
				fieldName : document.getElementById("fieldName_" + number).value,  
				fieldType : document.getElementById("fieldType_" + number).value,  
				fieldLength : document.getElementById("fieldLength_" + number).value  
	        }
		jsonData.push(dataRow);
		/*
		JSON.stringify()函数，将JSON数组或集合对象转为符合json格式的字符串，最终把这个符
		合json格式的字符串提交到服务器端(servlet)解析处理
		*/
		var showJsonDivNode = document.getElementById("showText2");
		showJsonDivNode.innerHTML = message + JSON.stringify(jsonData);
		showJsonDivNode.style.height = "auto";
		document.getElementById("jsonDataToServer").value = JSON.stringify(jsonData);
	}
	
	function setShowTextDivNodeValue(){
		var tableDataJsonFormNode = document.getElementById("tableDataJson"); 
		var showTextDivNode = document.getElementById("showText"); 
		showTextDivNode.innerHTML = "提交到服务器" + tableDataJsonFormNode.action + "地址处理(servlet)<br>";
	}

</script>
</html>

Field实体类

package com.jiongmeng.entity;

public class Field {
	
	private String fieldName;
	private String fieldType;
	private String fieldLength;
	
	public Field() {
		
	}

	public Field(String fieldName, String fieldType, String fieldLength) {
		super();
		this.fieldName = fieldName;
		this.fieldType = fieldType;
		this.fieldLength = fieldLength;
	}

	public String getFieldName() {
		return fieldName;
	}

	public void setFieldName(String fieldName) {
		this.fieldName = fieldName;
	}

	public String getFieldType() {
		return fieldType;
	}

	public void setFieldType(String fieldType) {
		this.fieldType = fieldType;
	}

	public String getFieldLength() {
		return fieldLength;
	}

	public void setFieldLength(String fieldLength) {
		this.fieldLength = fieldLength;
	}

}

名字叫TableDataJson的servlet

package com.jiongmeng.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.jiongmeng.entity.Field;

import net.sf.json.JSONArray;

/**
 * 表格中多行数据使用Json格式提交到服务器端
 */
@WebServlet("/TableDataJson")
public class TableDataJson extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//从jsp页面中的隐藏域中获取到json格式的字符串
		String jsonDataStr = request.getParameter("jsonDataToServer");
		System.out.println("********************从客户端提交到服务器端的json数据********************");
		System.out.println(jsonDataStr);
		System.out.println("********************从客户端提交到服务器端的json数据********************");
		/**
		 * Json对象与Json字符串的转化、JSON字符串与Java对象的转换可参考网
		 * 页https://www.cnblogs.com/zq-boke/p/5833387.html
		 */
		//把JSON字符串转换为JAVA对象数组(思路：转换为JAVA对象数组后，然后就可以保存到数据库中了)
		JSONArray jsonArray = JSONArray.fromObject(jsonDataStr);
		 List<Field> fields= (List<Field>)JSONArray.toCollection(jsonArray, Field.class);
		 System.out.println("——***字段名***—————***字段类型***————***字段长度***————");
		for (Field field : fields) {
			System.out.println(field.getFieldName() + " / " + field.getFieldType() + " / " + field.getFieldLength());
			System.out.println("—————————————————————————————————————————");
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//处理中文乱码
		request.setCharacterEncoding("utf-8");
		doGet(request, response);
	}

}

后台打印如下

********************从客户端提交到服务器端的json数据********************
[{"fieldName":"姓名","fieldType":"字符串","fieldLength":"40"},{"fieldName":"籍贯","fieldType":"字符串","fieldLength":"120"},{"fieldName":"字段名3","fieldType":"字段类型3","fieldLength":"字段长度3"},{"fieldName":"字段名4","fieldType":"字段类型4","fieldLength":"字段长度4"},{"fieldName":"字段名5","fieldType":"字段类型5","fieldLength":"字段长度5"},{"fieldName":"字段名6","fieldType":"字段类型6","fieldLength":"字段长度6"}]
********************从客户端提交到服务器端的json数据********************
——***字段名***—————***字段类型***————***字段长度***————
姓名 / 字符串 / 40
—————————————————————————————————————————
籍贯 / 字符串 / 120
—————————————————————————————————————————
字段名3 / 字段类型3 / 字段长度3
—————————————————————————————————————————
字段名4 / 字段类型4 / 字段长度4
—————————————————————————————————————————
字段名5 / 字段类型5 / 字段长度5
—————————————————————————————————————————
字段名6 / 字段类型6 / 字段长度6
—————————————————————————————————————————