如何在html文件上获取json数据?

时间:2018-01-06 10:03:29

标签: html json

student.json

{
    "student": [
       {
           "SNo": "1",
           "StudentName": "YASHAA BANERJEE",
           "AdmissionNo": "01F7001",
           "Subject": "Science",
           "Class": 01
       },
       {
           "SNo": "2",
           "StudentName": "SAKINA KASSIM MATCHESWALA",
           "AdmissionNo": "02G7015",
           "Subject": "Maths",
           "Class": 02
       },
       {
           "SNo": "3",
           "StudentName": "AADITHYA PRADEEP",
           "AdmissionNo": "02D7021",
           "Subject": "Maths",
           "Class": 02
       }
   ]
}

的index.php

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
        <script>
            $(function() 
            {
                var students = [];
                $.getJSON('students.json', function(data) 
                {
                    $.each(data.student, function(i, f) 
                    {
                        var tblRow = "<tr>" + "<td>" + f.SNo + "</td>" +
                        "<td>" + f.StudentName + "</td>" + "<td>" + f.AdmissionNo + "</td>" + "<td>" + f.Subject + "</td>" + "<td>" + f.Class + "</td>" + "</tr>"
                        $(tblRow).appendTo("#userdata tbody");
                    });
                });
            });
        </script>
    </head>
<body>
    <div class="page">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" height="90%">
            <tr valign="top" align="center">
                <td>
                    <table class="data-table" id= "userdata">
                        <thead>
                            <tr>
                                <th>SNo.</th>
                                <th>Student Name.</th>
                                <th width='120'>Admission No</th>
                                <th>Subject</th>
                                <th>Class</th>        
                            </tr>
                        </thead>
                        <tbody>

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

在这段代码中我创建了一个students.json文件和index.php文件,在json文件里面我有学生数据,我想在我的index.php文件中使用json数据,但数据还没有显示我不知道知道问题在哪里?那么,我该怎么办呢?请帮帮我。

谢谢

1 个答案:

答案 0 :(得分:0)

您可以看到一个简单的代码:

&#13;
&#13;
  var json = '{"data":[{"SNo":"1","StudentName":"YASHAA BANERJEE","AdmissionNo":"01F7001","Subject":"Science","Class":"1"}]}'
json = JSON.parse(json);

var tb = $("#tab");

$.each(json.data,function(i,value){
  tb.append("<tr><td>SNo: " + value.SNo + "</td><td>StudentName: " + value.StudentName + "</td><td>AdmissionNo: " + value.AdmissionNo + "</td><td>Subject: " + value.Subject + "</td><td>Class: " + value.Class + "</td></tr>");
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tab">
  
<table>
&#13;
&#13;
&#13;