某公司由于业务需要，新招聘一批员工。员工的信息全部是以纸质简历的形式呈现，这批员工信息需要公司人事部录入公司系统。现在人事工作人员有两种可以选择的操作方式，第一种：打开员工信息录入页面，添加一条员工信息，点击提交按钮，等待页面提交完成和刷新，然后再次打开员工信息录入页面继续添加，如此反复操作，直到完成全部数据录入；第二种：人事工作人员打开员工信息录入页面，输入一个员工信息，然后点击“添加一条记录”按钮，继续录入下一个员工信息，直到全部员工信息录入完成后，点击“提交”按钮，一次保存所有员工信息。我们分析第一种方式，工作人员需要多次打开信息录入页面，需要多次提交单个员工信息和等待页面跳转；第二种方式只需要打开一次员工信息录入页面，只需要提交一次录入的员工信息，只等待一次页面跳转，相比之下，方式二更节约时间。下面针对第二种操作方式的实现做个演示。
前端页面代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ page language="java" import="wnxy.javaweb.demo.dao.po.*" %> <% 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>json数组演示</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" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript"> var rowNum = 1; // 行号 /** * 添加一行输入框 */ function addRow(){ rowNum += 1; var row = '<tr> ' + '<td>' + rowNum + '</td>' + '<td><input type="text" name="name" /></td>' + '<td><input type="text" name="sex" /></td>' + '<td><input type="text" name="addr" /></td>' + '<td><input type="text" name="age" /></td>' + '</tr>'; $("#info > tbody").append(row); }
/** * table标签必须有 <tbody> 标签此方法才适用 * @param tabId */ function tableInput2JsonArr(tabId){ var objArr = new Array(); // 对象数组 var $rows = $("#" + tabId + " > tbody > tr"); $rows.each(function (tr_i, tr){ // 遍历行, rows是jquery对象 var obj = new Object(); // 单个对象 / 行 var tds = tr.getElementsByTagName("input"); // dom元素数组 //var tds = tr.getElementsByTagName("td"); for(var i = 0; i < tds.length; i++){ // 遍历单元格中的输入框 //var inp = tds[i].getElementsByTagName("input")[0]; var inp = tds[i]; // 单个input输入框 // 如果 inp 不是未定义和空 if(inp != undefined && inp != null){ obj[inp.name] = inp.value; // 设置属性名和值 } } objArr[tr_i] = obj; }); return JSON.stringify(objArr); }
/** * 提交表单 */ function submitForm(){ var tabId = "info"; // 表格的id var jsonArrStr = tableInput2JsonArr(tabId); var url = "jsonDemo?param=" + jsonArrStr; $.ajax({ url: url, type:"get", // 请求方式 async: true, cache: false, dataType:"text", // 预期服务器返回数据的类型 success:function(data){ alert(data); // $("#msg").html(data); } }); } </script> </head>
<body> <form id="form" > <table id="info" > <thead> <tr><th>编号</th> <th>姓名</th><th>性别</th> <th>地址</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>0</td> <td><input type="text" name="name" value="" /></td> <td><input type="text" name="sex" value="" /></td> <td><input type="text" name="addr" value="" /></td> <td><input type="text" name="age" value="" /></td> </tr> </tbody> </table> </form> <input type="button" value="提 交" onClick="submitForm()" /> <input type="button" name="name" onclick="addRow()" value="添加一条记录" /> <span id="msg"></span> </body> </html>
|
Servlet代码如下：
response.setContentType("text/json"); // 避免中文取值和传输乱码 request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8");
String arrStr = request.getParameter("param"); System.out.println("提交数据： " + arrStr); // 使用三方包处理json数组格式字符串 JSONArray jsonArr = JSONArray.fromObject(arrStr); List<People> list = (List<People>)JSONArray.toList(jsonArr, People.class); PrintWriter out = response.getWriter(); out.print("保存成功"); |
该例中，关键点在于灵活的使用JavaScript和jQuery实现JSON数组格式字符串。借此例也向大家介绍下JSON数据格式在后台的一般处理方式。这种处理方式在开发过程中有其使用价值，特别是在上述场景中，页面录入的数据量不小，但是又不是非常大时尤其明显。当然，条条大路通罗马，也还有其他的方案可以处理上述场景，大家可以发散思维，想一套自己的解决方案。最后附上JSON后台处理索依赖的三方包，大家可以到蜗牛学院官方的学院专属QQ群里下载jar包。
这样创新的模式，值得你的选择！
蜗牛学院，只为成就更好的你！
还在等什么，赶快关注蜗牛学院官方微信，加入到蜗牛学院的大家庭中来吧！
