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

Question

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

My Controller 中返回 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 调用更改为“GET”请求。

这个:

 type: "POST",

需要是这样的:

type: "GET",

您还需要将内容类型设置为 json:

contentType: 'application/json',

更新

下面一行会报错:

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

我猜你可能希望它是这样的:

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