技術標籤：JS

這裡簡單記一個遇到的坑，我在前端需要一個json陣列，大概格式如下

data: [
    {name: '小明', value: 1},
    {name: '小紅', value: 2},
    {name: '小王', value: 3},
    {name: '小白', value: 4}
]

一開始我在後端是通過Request的setAttruibute放進去的，這樣在前端拿到資料的話資料被識別成字串，且雙引號被轉義了！！

JSONArray blogTipsArray = blogTipService.findAllBlogTipToJson();
request.
 
setAttribute("blogTipsArray", blogTipsArray);
System.out.println(blogTipsArray.toJSONString());

在前端頁面獲取資料並簡單打印出來

<script>
    alert('[[${blogTipsArray}]]');
</script>

在控制檯上打印出來的是

[{"name":"預設標籤","value":"c429deb2c64b43198d99e80a9d8b0d11"}]
 

然而我要的是一個Json陣列，最後傳過來的效果卻跟我的不一樣

• json陣列被轉成字串
• 雙引號被轉義

解決方法

1. 用ajax傳值就不會出現上面的這兩個問題

@PostMapping("/findAllTips")
@ResponseBody
public JSONArray findAllTips() {
    return blogTipService.findAllBlogTipToJson();
}

$.ajax({
        type: "post",
        url: "/findAllTips",
        success: function (data) {
            alert(parseJSON[0].name);
        }
    });
 

2. 也可以後端傳字串，然後前端將字串轉成json陣列

@PostMapping("/findAllTips")
@ResponseBody
public String findAllTips() {
    return blogTipService.findAllBlogTipToJson().toJSONString();
}

$.ajax({
        type: "post",
        url: "/findAllTips",
        success: function (data) {
            var parseJSON = $.parseJSON(data);
            alert(parseJSON[0].name);
        }
    });