通过Ajax请求后台数据，返回JSONArray（JsonObject）-js tutoriel-php.cn

通过Ajax请求后台数据，返回JSONArray（JsonObject）

PHPz

Libérer： 2018-09-30 16:30:05

avant

2575 Les gens l'ont consulté

本章给大家介绍通过Ajax请求后台数据，返回JSONArray（JsonObject），页面（Jquery）以table的形式展示。

本篇给大家介绍通过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=&#39;4&#39; style=&#39;text-align:center;&#39;>" + data[0].con + "</th></tr>";
						}
						str += "<tr><th style=&#39;text-align:center;&#39;>姓名</th><th style=&#39;text-align:center;&#39;>预报结论</th><th style=&#39;text-align:center;&#39;>预报理由</th><th style=&#39;text-align:center;&#39;>参与情况</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=&#39;text-align:center;&#39;>" + 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>

Copier après la connexion

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(?,&#39;yyyy-mm-dd&#39;) 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();
}

Copier après la connexion

以上就是本章的全部内容，更多相关教程请访问AJAX视频教程！