如何使用javascript在jsp中顯示json數據

我正在使用spring mvc。我的控制器「Book.java」正在返回一個json對象。我想在jsp中以表格的形式顯示json對象的內容。我該怎麼做。如何使用javascript在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; 
}

的書目是具有內容「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>

我試圖通過一個按鈕

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

測試jQuery的電話，但無法顯示的數據。

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 
    }] 
}]

來源

2015-02-06 bablu

1）確實http：// localhost：8080/restApp/book/list返回有效的JSON 2）是否在同一個原始位置（服務器和端口號）3）控制檯中的任何錯誤？ – mplungjan 2015-02-06 13:46:23

是json對象正在返回。我檢查了它 – bablu 2015-02-06 13:47:03

catch（Exception e）=糟糕的做法！ – 2015-02-06 13:48:22

首先，你需要改變你的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){

來源

2015-02-06 13:47:53 hutchonoid

我改變類型爲GET。仍然不起作用 – bablu 2015-02-06 13:57:57

@bablu你還設置了contentType嗎？看到我的其他更新。發佈您收到的錯誤。人們解決問題會更容易。 – hutchonoid 2015-02-06 14:08:05

是的，我確實將contentType設置爲contentType：「application/json; charset = utf-8」， – bablu 2015-02-06 14:16:09

看來你張貼的JSON輸出是一個數組，而不是一個對象（以[，not {）開頭。你可以使用JSONObject類來輸出適當的json對象。

來源

2015-02-06 15:38:05

如何使用javascript在jsp中顯示json數據

回答

相關問題