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 里面拼接一下就好了。