Request background data through Ajax and return JSONArray (JsonObject)

This chapter will introduce you to requesting background data through Ajax, returning JSONArray (JsonObject), and the page (Jquery) is displayed in the form of a table.

This article will introduce you to the method of requesting background data through Ajax and returning JSONArray (JsonObject). The page (Jquery) is displayed in the form of a table.

Click "Consultant Status Table" and a pop-up layer will display a table, as shown below:

Use Ajax, Jquery, JSONArray and JsonObject to implement:

The code is as follows:

In hspersons.html:

nbsp;html>


	
		<meta>
		<title>会商人员情况表</title>
		<script>
			$(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 + "";
						}
						str += "<tr><th style=&#39;text-align:center;&#39;>姓名<th style=&#39;text-align:center;&#39;>预报结论<th style=&#39;text-align:center;&#39;>预报理由<th style=&#39;text-align:center;&#39;>参与情况";
						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 + "";
							//alert(data[i].mman);	    	   
							str += "<td>" + data[i].verdict + "";
							str += "<td>" + data[i].reason + "";
							str += "<td>" + data[i].nopartreason + "";
							str += "<tr>";
						} 
						/* for(var i in data){	    	   
						* 	console.log(i);	    	   
						* str += "<tr>";	    	   
						* str += "<td>" + i.mman + "";	    	   
						* alert(i.mman);	    	   
						* str += "<td>" + i.verdict + "";	    	   
						* str += "<td>" + i.reason + "";	    	   
						* str += "<td>" + i.nopartreason + "";	    	   
						* str += "<tr>";	       
						* } */
						$("#hs").append(str);
						
					}
				});
			});
		</script>
	

	
		

Java class part code:

@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();
}

The above is the entire content of this chapter. For more related tutorials, please visit AJAX Video Tutorial!