使用@ResponseBody返回JSON数据

创建一个项目,在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=$("");
                            $("").html(this.id).appendTo(tr);
                            $("").html(this.name).appendTo(tr);
                            $("").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数据_第1张图片

你可能感兴趣的:(JavaWeb,Spring,MVC,初识Spring,MVC)