js前台页面组装table内容，传递到数据后台

最新推荐文章于 2022-12-16 16:12:45 发布

原创最新推荐文章于 2022-12-16 16:12:45 发布 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js #ajax #json #java

前端同时被 3 个专栏收录

66 篇文章

订阅专栏

Java知识

61 篇文章

订阅专栏

Java Web

12 篇文章

订阅专栏

本文介绍了如何在前端JavaScript中读取表格数据，将其转换为JSON格式，然后利用AJAX发送到后台。后台使用JSON工具将接收到的JSON字符串解析成List<Map>进行处理。

1、前台通过js读取table除第一行（标题栏）以外的数据，组装成json字符传

2、通过ajax传递给后台

3、后台通过json工具包将json字符串解析成List<Map>

前台代码


<table id="table" >
	            <thead>
	            <tr class="backgroundF5F5F5">
	            	<th>title1</th>
	                <th>title2</th>
	                <th>title3</th>
	                <th>title点</th>
	                <th>title名</th>
	                <th>title时间</th>
	            </tr>
	            </thead>
				 <tr class="backgroundF5F5F5">
	            	<td>info1</td>
	                <td>info2</td>
	                <td>info3</td>
	                <td>info点</td>
	                <td>info名</td>
	                <td>info时间</td>
	            </tr>
	            
</table>

<script>
	 $("#buttonID").click(function(){
        	var jsonInfo = tableToJson("table");
            console.log(jsonInfo);
        	$.ajax({
					 type:'post',
					 url:'url/tableFunction',
					 data:{
					 	info : jsonInfo
					},
					 dataType:"json",
					 error:function(XMLHttpRequest, textStatus, errorThrown){
					    toolTipFail("重置错单失败");
					 },success:function(result){
					 	 toolTipFail("重置错单成功");
		        	}
		        });
        });
        
        function tableToJson(tableName){
        	var tabLen = document.getElementById(tableName);
        	var jsonT = "[";
            for (var i = 1; i < tabLen.rows.length; i++) {
                    jsonT += '{"par1":"' + tabLen.rows[i].cells[1].innerHTML + '","par2":"' + tabLen.rows[i].cells[2].innerHTML + '","par3":"' + tabLen.rows[i].cells[3].innerHTML + '","par4":"' + tabLen.rows[i].cells[4].innerHTML + '","par5":"' + tabLen.rows[i].cells[5].innerHTML +'","par6 + tabLen.rows[i].cells[7].innerHTML + '"},'
            }
            jsonT= jsonT.substr(0, jsonT.length - 1);
            jsonT += "]";
            return jsonT;
        }
</script>

java代码


String info = para.getString("info").toString();//para为通过ajax获取的参数


		List<Map> provList = (List<Map>)  JSONArray.fromObject(info);//将任意对象转为map数组。
		System.out.println("获取到的数组大小=" + provList.size());