本文主要是介绍通过Ajax请求后台数据，返回JSONArray（JsonObject），页面（Jquery）以table的形式展示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
点击“会商人员情况表”，弹出层，显示一个表格，如下图：
利用Ajax和Jquery和JSONArray和JsonObject来实现：
代码如下：
在hspersons.html中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会商人员情况表</title>
<script type="text/javascript">
$(document).ready(function(){$.ajax({type: "POST",url: path+"/pop/hsPersons",//data: {sdate:date},dataType: "json",success: function(data){console.log(data);var str = "";for(var i=0; i < 1; i++) {str += "<tr>";str += "<th colspan='4' style='text-align:center;'>" + data[0].con + "</th></tr>";}str += "<tr><th style='text-align:center;'>姓名</th><th style='text-align:center;'>预报结论</th><th style='text-align:center;'>预报理由</th><th style='text-align:center;'>参与情况</th></tr>";for(var i=0; i < data.length; i++) {//data[i]//console.log(data[i]);//alert(data[i].con);str += "<tr>";str += "<td style='text-align:center;'>" + data[i].mman + "</td>";//alert(data[i].mman);str += "<td>" + data[i].verdict + "</td>";str += "<td>" + data[i].reason + "</td>";str += "<td>" + data[i].nopartreason + "</td>";str += "<tr>";}/* for(var i in data){console.log(i);str += "<tr>";str += "<td>" + i.mman + "</td>";alert(i.mman);str += "<td>" + i.verdict + "</td>";str += "<td>" + i.reason + "</td>";str += "<td>" + i.nopartreason + "</td>";str += "<tr>";} */$("#hs").append(str);}});});
</script>
</head>
<body><table id= "hs" class="table table-striped table-bordered table-condensed"></table>
</body>
</html>Java类部分代码：
@RequestMapping(value = "/hsPersons")public @ResponseBody String hsPersons(HttpServletRequest request, HttpServletResponse response) {ResMessage message = ResMessageFactory.getDefaultInstance(request);try {String dateStr = com.yuanls._comm.util.Utils.getFormatDate("yyyy-MM-dd");List<Object> dataList = new ArrayList<Object>();dataList.add(dateStr);EntityManager entityManager = dao.getEntityManager();//得到会商人员的今天所有的历史记录T_subject 开始String sql = "select con,mman,verdict,reason,part,nopartreason from T_SUBJECT where ddatetime=to_date(?,'yyyy-mm-dd') order by part desc";List<Map<String, Object>> list = ybzxTwoService.queryListMapByList(sql, dataList, entityManager);//HsPerson hsPerson = null;JSONArray jsonArray = new JSONArray();for (Map<String, Object> map : list) {JSONObject jsonObject = new JSONObject();jsonObject.put("con", map.get("con".toUpperCase())+"");jsonObject.put("mman", map.get("mman".toUpperCase())+"");String verdict = map.get("verdict".toUpperCase())+"";if("null".equals(verdict.toString().trim())) {jsonObject.put("verdict", "");}else {jsonObject.put("verdict", map.get("verdict".toUpperCase())+"");}String reason = map.get("reason".toUpperCase())+"";if("null".equals(reason.toString().trim())) {jsonObject.put("reason", "");}else {jsonObject.put("reason", map.get("reason".toUpperCase())+"");}String part = map.get("part".toUpperCase())+"";if("1".equals(part)) {jsonObject.put("nopartreason", "");}else {jsonObject.put("nopartreason", map.get("nopartreason".toUpperCase())+"");}jsonArray.add(jsonObject);}this.setSuccess(message);return jsonArray.toString();} catch (Exception e) {log.error(e.getMessage(), e);this.setError(this.getClass(), message, e.getMessage(), request);}return message.getString();}
这篇关于通过Ajax请求后台数据，返回JSONArray（JsonObject），页面（Jquery）以table的形式展示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
