1. 程式人生 > >使用@ResponseBody返回JSON數據

使用@ResponseBody返回JSON數據

數據 ota ror lis 還需要 st3 response jquery array

創建一個項目,在web目錄下新建一個assets/js目錄,加入jquery和json2的js文件,在lib下加入fastjson的jar文件。

Book3Controller

package com.wen.controller;

import com.wen.domain.Book;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;

@Controller
public class Book3Controller {
    @RequestMapping(value = "/test3RequestBody")
    //@ResponseBody會將集合數據轉換成json格式並將其返回給客戶端
    @ResponseBody
    public Object getJson(){
        List<Book> bookList = new ArrayList<>();
        bookList.add(new Book(1,"小豬豬","xiaoxiaorui"));
        bookList.add(new Book(2,"小貓咪","xiaoxiaorui"));
        return bookList;
    }
}

index.jsp

<html>
<head>
    <title>測試返回JSON格式的數據</title>
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/json2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            testResponseBody();
        });

        function testResponseBody() {
            $.ajax({
                    dataType: "json",//預期服務器返回的數據類型
                    type: "post",//請求方式post 或 get
                    url: "${pageContext.request.contextPath}/test3RequestBody",//發送請求的URL字符串
                    contentType: "application/json",//發送信息至服務器時的內容編碼格式
                    async: true,//默認設置下,所有請求均為異步請求。如果設置為false,則發送同步請求
                    success: function (data) {//請求成功的回調函數
                        $.each(data,function () {
                            var tr=$("<tr align=‘center‘/>");
                            $("<td/>").html(this.id).appendTo(tr);
                            $("<td/>").html(this.name).appendTo(tr);
                            $("<td/>").html(this.author).appendTo(tr);
                            $("#book-table").append(tr);
                        })
                    },
                    error: function () {
                        alert("數據加載失敗")
                    }
                })
        }
    </script>
</head>
<body>
<table id="book-table" border="1" style="border-collapse: collapse">
    <tr align="center">
        <th>編號</th>
        <th>書名</th>
        <th>作者</th>
    </tr>
</table>
</body>
</html>

因為spring中,我們使用的是fastjson處理json數據,因此還需要對springmvc-config.xml和web.xml進行一些其他配置,可以參考之前關於springmvc的文章。
技術分享圖片

使用@ResponseBody返回JSON數據