分别以jsp和html显示JSON数据

时间:2014-08-20 06:29:55

标签: html json jsp

我是Java的新手。我的test.json文件是一个以下列格式启动的数组:

{
    "Result": "OK",
    "TotalRecordCount": 23,
    "Records": [{
        "vEmail": "blabla@gmail1.com",
        "vUserName": "admin",
        "nDepartmentId": "6750",
        "nEnabled": "1",
        "department": 6750,
        "vFatherName": "mixalis",
        "vSurname": "mixalis",
        "vAfm": "123456",
        "vUsertype": "",
        "vName": "mixalis",
        "nId": "5651",
        "rolesDesc": ""
    },

依旧......

我无法理解jsp和html可以做什么......我的意思是在这个问题上(我希望通过读取json文件来显示数据)两者可以有相同的结果吗?和相同的代码对吗? ...好吧,这可以通过我的jsp或我的html页面中的以下代码完成..就像在body部分那样?或者在头部因为我很困惑,不知道是不是......我有简单的页面

<html>
<head>
<title>Loading JSON files using jQuery</title>
</head>
<body>

<h1 id="title"></h1>
<ul id="list"></ul>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $.getJSON("test.json", function(json){
            $("#email").text(json.vEmail);
            $.each(json.vUserName, function(key, val) {
                $("<li><a href='http://" + val + "'>" + val +    "</a></li>").appendTo("#list");
            }); // each()
        }); // .getJSON()
    }); // ready()
</script>

</body>
</html>

您会注意到,出于测试目的,我还没有编写所有数据,只有vEmailvUserName但是当我在Netbeans中运行它时没有出现任何数据。

2 个答案:

答案 0 :(得分:1)

 <html>
 <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
 <script>
  $(function() {
  var people = [];
   $.getJSON('test.json', function(data) {
     $.each(data.records, function(i, f) {
       var tblRow = "<tr>" + "<td>" + f.vEmail + "</td>" + "<td>" + f.vUserName +  "</td>" + "<td>" + f.nDepartmentId + "</td>" + "<td>" + f.nEnabled + "</td>" + "<td>" + f.department + "</td>" + "<td>" + f.vFatherName + "</td>" + "<td>" + f.vSurname + "</td>" + "<td>" + f.vAfm + "</td>" + "<td>" + f.vUsertype + "</td>" + "<td>" + f.vName + "</td>" + "<td>" + f.nId + "</td>" + "<td>" + f.rolesDesc + "</td>" + "</tr>"
       $(tblRow).appendTo("#userdata tbody");
    });
   });
  });
  </script>
 </head>
 <body>
 <div class="wrapper">
 <div class="profile">
 <table id= "userdata" border="2">
 <thead>
        <th>Email</th>
        <th>User Name</th>
        <th>Department Id</th>
        <th>Enabled</th>
        <th>Department</th>
        <th>Father Name</th>
        <th>Surname</th>
        <th>Afm</th>
        <th>User Type</th>
        <th>Name</th>
        <th>Id</th>
        <th>Roles Desc</th>
    </thead>
    <tbody>

    </tbody>
   </table>
 </div>
 </div>
 </body>
 </html>

答案 1 :(得分:-1)

如何使用spring在jsp页面中显示json数据?

{
    "_id": {
        "$oid": "58d2280914fe0a6e07b7469f"
    },
    "title": "test",
    "sms": "Testing By arun",
    "content": "Testing By arun",**strong text**
    "source": "",
    "contenturl": "",
    "videolink": "https://www.youtube.com/watch?v=94BzBOpv42g",
    "images": ["http://localhost:8088/src_bsnlcms/1490167809719_1490167813678.png"],
    "imagestxt": ["Testing By Raj"],
    "services": ["1~1~1"],
    "tag": [],
    "starred": 0,
    "ctype": 3,
    "author": "arun",
    "content_id": 1490167809719,
    "createdate": 1490167809719
}