保存表格中的多行数据对象到后台数据库

最新推荐文章于 2020-04-17 10:40:58 发布

killeraction

最新推荐文章于 2020-04-17 10:40:58 发布

阅读量176

点赞数

分类专栏： JSP JavaScript 文章标签：数据库 java json

本文链接：https://blog.csdn.net/killeraction/article/details/88335829

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

JSP

4 篇文章 0 订阅

订阅专栏

 思路：把表格中行的数据拼成Json格式的字符串传到后台，在后台使用解析Json字符串成相关的对象或者集合，然后持久化操作。

依赖包：Jquery，gson-1.4.jar

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	<script type="text/javascript" src="js/jquery.js"></script>
	<script>
	function addRow(){
		jQuery("#trData").clone().appendTo("#Tdate");
		var temp="<tr><td bgcolor='green'>11</td><td bgcolor='blue'>22</td><td bgcolor='grey'>33</td></tr>";
		jQuery("#Tdate").append(temp);
		}


	function delRow(obj){
		jQuery("#trData").remove();
		}
	
	function showChec(){
			alert(jQuery("#chec").attr("checked"));
		}
	$(function(){
		alert("总共的元素："+jQuery("#Tdate input:hidden").size());
		alert(jQuery("#Tdate tr").size());
		jQuery("#Tdate input:hidden").each(function(){
			var tmp=$(this).val();
			if(tmp==4){
				return;
				}
			else{
				alert(tmp);
				}
			});

		});

	var arr=new Array();
	
	$(function(){
		alert("开始循环表格中的元素了。");
		var name="";
		var sex="";
		var age="";
		var addr="";
	//[{"name":"name1","age":"age1"}
		var obj={'name': name , 'sex': sex , 'age' : age ,'addr':addr };
		var stringOjb="["
		jQuery("#Tdate tr:gt(0)").each(
			function (i){
			if(i!=3){
				name=jQuery(this).find("#name").text();
				stringOjb+="{'name':"+name;
				sex=jQuery(this).find("#sex").text();
				stringOjb+=" ,'sex':"+sex;
				age=jQuery(this).find("#age").text();
				stringOjb+=" ,'age':"+age;
				addr=jQuery(this).find("td > input:text").val();
				stringOjb+=" ,'addr':"+addr +"},";
				}
			if(i==3){
				alert("取文本框中的值了。");
				//alert(jQuery(this).find("input:text").val());
				alert("addr:"+ jQuery(this).find("td > input:text").val());
					}
				}
			);
		stringOjb+="]";
		alert(stringOjb);
		});
	</script>
  </head>
  
  <body>
    <input type="button" value="点击添加一行" οnclick="addRow();">
    <table id="Tdate" border="1">
    	<tr id="trData" bordercolor="red">
    		<td bgcolor="green">11</td>
    		<td bgcolor="blue">22</td>
    		<td bgcolor="grey">33
    		<input  type="text" value="1" id="frid">
    		<input  type="hidden" value="3" id="frid">
    		</td>
    		<td bgcolor="grey"><input  type="hidden" value="4" id="frid"></td>
    		<td><a href="#" οnclick="delRow(this);">点击删除</a></td>
    	</tr>
    	<tr id="trData1" bordercolor="red">
    		<td bgcolor="green" id="name">111</td>
    		<td bgcolor="blue" id="sex">222</td>
    		<td bgcolor="grey" id="age">333</td>
    		<td bgcolor="grey" id="addr"><input type="text" value="我的地址测试" id="frid1"></td>
    		<td><a href="#" οnclick="delRow(this);">点击删除</a></td>
    	</tr>
    	<tr id="trData1" bordercolor="red">
    		<td bgcolor="green" id="name">1121</td>
    		<td bgcolor="blue" id="sex">2224</td>
    		<td bgcolor="grey" id="age">3336</td>
    		<td bgcolor="grey" id="addr"><input type="text" value="我的地址" id="frid1"></td>
    		<td><a href="#" οnclick="delRow(this);">点击删除</a></td>
    	</tr>
    </table>
    <a href="/servlet/JsonServlet?jsonObj=">提交</a>
    
    <input type="checkbox" οnclick="showChec();" id="chec"/>
  </body>
</html>

使用解析Json格式的字符串。

import java.util.ArrayList;
import java.util.List;

import com.google.gson.Gson;

public class TestJson {
	public static void main(String[] args) {
		List<Person> persons = new ArrayList<Person>(0);
		Person person = new Person("name1", "age1");
		persons.add(person);
		Person person1 = new Person("name2", "age2");
		persons.add(person1);
		Person person2 = new Person("name3", "age3");
		persons.add(person2);
		Gson gson = new Gson();
		System.out.println(gson.toJson(persons));
		String jsonString = gson.toJson(persons);

		java.lang.reflect.Type type = new com.google.gson.reflect.TypeToken<List<Person>>() {
		}.getType();

		String json = gson.toJson(persons, type);
		System.out.println(json);
		String tmp="[{'name':'name1','age':'age1'},{'name':'name2','age':'age2'},{'name':'name3','age':'age3'}]";
		
		List<Person> persons1 = gson.fromJson(tmp, type);
		
		for (Person person3 : persons1) {
			System.out.println(person3.getName());
		}

		// gson.to
	}
}

class Person {

	public Person(){}
	public Person(String name, String age) {
		this.age = age;
		this.name = name;

	}

	private String name;
	private String age;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getAge() {
		return age;
	}

	public void setAge(String age) {
		this.age = age;
	}

}

更多关于Google Json jar的用法，参见：http://www.cnblogs.com/lupeng0527/archive/2011/08/06/2129547.html

killeraction

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
保存表格中的多行数据对象到后台数据库

.4.jar&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt;%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+&quo
复制链接

扫一扫