分别在jsp和html中显示JSON数据

小编典典

分别在jsp和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页面中使用以下代码来完成此操作。或在头上造成即时消息混乱，不知道去了…。我有简单的页面

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

你会发现，用于测试目的，我没有写的所有数据，只有vEmail和vUserName，但是当我运行它在Netbeans中没有露面。

阅读 360

2020-06-10

共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>

2020-06-10