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