ajax提交整个表格数据至后台，带回显

1、问题描述，将一个table中的数据整个提交至后台转换成list

2、主要功能：

1)、表格数据json提交后台转成list，jsonObject
2)、后台list数据回显至前端表格，
3)、表格带增加行删除行功能，
4)、select元素回显
5)、jQuery ajax submit提交

3、前端提交表格数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextpath}"/>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>


</head>
<body>

 <form method="post" id="userFormID">
    <table border="1" id="UserTableID">
 <tr>
 <td style="width:10%">序号</td>
 <td style="width:10%">名字</td>
 <td style="width:10%">年龄</td>
 <td style="width:10%">性别</td>
 <td style="width:10%">操作</td>

 </tr>
 
 <tr >
 <td style="width:10%" number="1">1</td>
 <td style="width:10%" nameTd="1"> <input type="text" value="张三" jsonName='name' onfocus="if (value =='请输入'){value =''}"onblur="if (value ==''){value='请输入'}"></td>
 <td style="width:10%" ageTd="1"> <input type="text" value="22" jsonName='age' onfocus="if (value =='请输入'){value =''}"onblur="if (value ==''){value='请输入'}"></td>
 <td style="width:10%" sexTd="1">
 <select jsonName='sex'>
    <option value="男" selected="selected">男</option>
    <option value="女" >女</option>
 </select>
 </td>
  <td style="width:10%" operTd="1">
	 <input type="button" value="delete" onclick="fnDeleteRow(this,'UserTableID')" style="float:left; margin-top:6px; margin-left:20%">
	 <input type="button" value="add" onclick="tbAddRow(this);" style="float:right; margin-top:6px; margin-right:20%">
  
  </td>
 
 </tr>
 </table>
	 <input type="button" value="提交" onclick="submitUser()" style="float:right; margin-top:6px; margin-right:20%">
  
     
 </form>  
  <input type="hidden" id="rootDir" value="${ctx}">  
 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>	
<script type="text/javascript" src="../js/jquery.form.min.js"></script>	
<script type="text/javascript" src="../js/angular.min.js"></script> 
<script type="text/javascript" src="../js/saveuser.js"></script>     
</body>
</html>

4、js部分代码

//得到表格数据
function getUser(tableID){
	var args = {};
	$("#"+tableID+" tr:gt(0)").each(function(i){
		var data = new Object();
		$(this).find("select[jsonName],input[jsonName]").each(function(){
			var name = $(this).attr("jsonName");
			data[name]= $(this).val();
		});
		args[i]=data;
	});
	alert("data;"+JSON.stringify(args));
	return JSON.stringify(args);
}

5、后台部分代码

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws servletexception,IOException {
		String users = request.getParameter("user");
   	 if (users!=null&&!"".equals(users)) {
 			JSONObject json=JSONObject.fromObject(users);
 			int size = json.size();
 			List<User> list= new ArrayList<User>();
 			for (int i = 0; i < size; i++) {
 				JSONObject o = (JSONObject) json.get(""+i);
 				User b = (User) JSONObject.toBean(o,User.class);
 				System.out.println(b.getName());
 				list.add(b);
 			}
 					
 		} 
	}

6、代码下载地址 http://download.csdn.net/detail/u014520797/9425372

7、注意：demo 省去dao层，回显的数据是自定义的，与提交数据无关系

原文地址：https://www.jb51.cc/ajax/162456.html

ajax提交整个表格数据至后台，带回显

相关推荐