Question

我正在使用spring mvc。我的控制器“Book.java”正在返回一个json对象。我想在jsp中以表格的形式显示json对象的内容。我怎么能这样做。

我的控制器中返回json对象的函数：

@Controller
@RequestMapping(value="/book")
public class BookController {

@Autowired
BookService bookService;

@RequestMapping(value="/list",method=RequestMethod.GET)
public @ResponseBody
List<Book> getBookList(){
    List<Book> bookList = null;
    try{
        bookList = bookService.getBookList();
    }catch(Exception e){
        e.printStackTrace();
    }
    System.out.println("bookList returned");
    System.out.println(bookList);
    return bookList;
}

bookList是具有内容“bookId”和“bookName”的书籍列表。我想在表格中显示jsp中的内容。怎么办呢。

我试过这样但没有显示数据。

<table id="table1" align = center border='1.5' width='600' cellpadding='1' cellspacing='1'>
<h2>Book Details</h2>
<tr>
    <th>BookId</th>
    <th>BookName</th>
<!--     <th>Item Details</th>   -->
</tr>
<tbody>
</tbody>
</table>

我的jquery致电

<script type="text/javascript">

function madeAjaxCall(){
$.ajax({
type: "GET",
url: "http://localhost:8080/restApp/book/list",
contentType:"application/json; charset=utf-8",
dataType:"json",
success: function(data){ 
        if(data){
            var len = data.length;
            var txt = "";
            if(len > 0){
                for(var i=0;i<len;i++){
                    if(data[i].bookId && data[i].bookName){
                        txt += "<tr><td>"+data[i].bookId+"</td><td>"+data[i].bookName+"</td></tr>";
                    }
                }
                if(txt != ""){
                    $("#table1").append(txt).removeClass("hidden");
                }
            }
        }
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert('error: ' + textStatus + ': ' + errorThrown);
    }
});
return false;
});


</script>

我尝试通过按钮

测试jquery调用

<button onclick="madeAjaxCall()">book list</button>

但无法显示数据。

JSON

[{
    "bookId": 1,
        "bookName": "aa",
        "chapter": [{
        "chapterId": 1,
        "chapterName": "xx",
        "book": null
    }, {
        "chapterId": 2,
        "chapterName": "yy",
        "book": null
    }]
}, {
    "bookId": 2,
        "bookName": "bb",
        "chapter": [{
        "chapterId": 4,
        "chapterName": "pp",
        "book": null
    }, {
        "chapterId": 3,
        "chapterName": "zz",
        "book": null
    }]
}, {
    "bookId": 3,
    "bookName": "cc",
        "chapter": [{
        "chapterId": 5,
        "chapterName": "qq",
        "book": null
    }, {
        "chapterId": 6,
        "chapterName": "rr",
        "book": null
    }]
}, {
    "bookId": 4,
    "bookName": "dd",
        "chapter": [{
        "chapterId": 8,
        "chapterName": "tt",
        "book": null
    }, {
        "chapterId": 7,
        "chapterName": "ss",
        "book": null
    }]
}]

Answer 1

首先，您需要将ajax调用更改为＆＃39; GET＆＃39;请求。

这：

 type: "POST",

需要这样：

type: "GET",

您还需要使用以下内容将内容类型设置为json：

contentType: 'application/json',

<强>更新

以下行会出错：

 if(data[i].bookId && data[i].bookName){

我猜你可能想要这样：

 if(data[i].bookId != null && data[i].bookName != null){

Answer 2

您发布的json输出似乎是一个数组，而不是一个对象（以[，而不是{开头）。您可以使用JSONObject类输出正确的json对象。

如何使用javascript在jsp中显示json数据

2 个答案: