ajax根据ID查询数据库并返回Json格式数据返回js，使用append显示到页面。判断json值为[]或者[[]]的问题。

ajax根据ID查询返回json并显示到页面，值为[]或者[[]]怎么判断。

• Java后台代码

@ResponseBody
@RequestMapping(value="/queryCouponState",produces = "text/html;charset=utf-8")
public String queryCoupon(
		HttpServletRequest request,
		Model model,
		String state) throws Exception{
	
	//根据状态查询出来的List数据
	List<CouponVo> coupon = couponSer.queryCouponInfo("uuid_id3",10000,state);
	//获取根据状态查询的数据条数
	System.out.println("条数"+coupon.size());
	System.err.println("状态"+state);
	model.addAttribute("coupon",coupon);
	JSONArray jsonArray = new JSONArray();
	jsonArray.add(coupon);
	System.out.println("json数据"+jsonArray);
	if(coupon.size()==0){
		return "error";
	}
	return jsonArray.toString();
}

根据状态Id查询没有该状态的数据

根据状态Id查询有该状态的数据

根据查询的list集合条数是否大于0判断是否存在数据。
有则让返回到success，没有则让返回error

存在数据返回[{"name":"张三"}]样式，
不存在返回[] 或者多重数组的 [[ ]]时。

---

设置返回 return “error”; 时候就返回到JS的error那里了。因为返回格式应该是json格式，而我是返回String格式的"error"字符串，所以出错了，就返回到error里面了。

设置返回 return jsonArray.toString(); 时候就返回到JS的success里面，因为返回格式正确了,就返回到success里面了。

---

• Js代码

function couponState(state){
	var key;
	$.ajax({
		type : "post",
		url : "/queryCouponState.htm",
		dataType : "json",
		data:{state:state},
		success: function (data) {
			$(".table_coupon tr:not(:first)").remove();
			$.each(data, function(i, item){   
				$.each(item,function(j,val){
					$(".table_coupon").append(
						"<tr style='font-size: 14px;'>"+
							"<td height='35'>"+  val.couponType.typeName +"</td>"+
							"<td style='text-align: center;'>¥ " + val.couponType.couponPrice+"</td>"+
							"<td style='text-align: center;'>"+
							"<fmt:formatDate value='${dateObject}' pattern='yyyy-MM-dd HH:mm:ss' /> "+val.couponStartTime +" 开始"+
							"<br />"+
							"<fmt:formatDate value='${dateObjectend }' pattern='yyyy-MM-dd HH:mm:ss' /> "+val.couponEndTime +" 截至"+
							"<br />"+
							"<td>"+ val.couponType.availableDay +"</td>"+
							"<td>"+ val.couponType.couponFloor +"</td>"+
							"<td>"+ val.couponType.couponDesc +"</td>"+
						"</tr>"
						);
					$('.coupon-null > div').remove();
				});
			});
		},
		error: function (data) {
			$(".table_coupon tr:not(:first)").remove();
			$('.coupon-null > div').remove();
			$('.coupon-null').append(
				"<div class='empty_is'>"+
					"<div class='empty_photo'>"+
						"<img src='control/images/yhj.png' />"+
					"</div>"+
					"<div class='empty_text'>"+
						"<b>您还没有可用的优惠券！</b>"+
					"</div>"+
					"<div class='clear_both'></div>"+
				"</div>"
			);
		}
	});
}

---

• Js代码截图

成功返回：

失败返回：

---

• html页面代码（用的是状态Id传参数）

<div class="mi-coupon-top">
	<a onclick="couponState('Y')" class="wsy">
		<span>未使用</span>
	</a>
	<a onclick="couponState('K')">
		<span>已使用</span>
	</a>
	<a onclick="couponState('G')">
		<span>已过期</span>
	</a> 
	<a onclick="couponState('N')">
		<span>未激活</span>
	</a>
	<input type="button" class="activation" onClick="edit()" value="优惠卷激活" />
</div>

---

• html效果截图

查询有值截图：

查询无值截图：

在js写html页面时只需获最外面那层大的div然后 .append()属性就好了。为了方便写，最好在页面也好静态然后拷到 js 里面拼接一下就好了。