1

我有一个 JSON 格式页面和一个 HTML 页面。在 JSON 格式的页面中，我有员工数据。在 HTML 页面中，如果我单击提交按钮，页面必须将 JSON 格式的值显示为表格格式。

在 .html 页面中，我添加了 .js 文件的引用。之后我写代码

<table id="EmpNewTable" border="2"> 
<tr> 
  <th>First Name</th> 
</tr> 
</table><br /><br /> 
<input type="button" id="DisplyEmp" value="Display" onclick="test();" />

在 test() 方法中我必须写什么代码？我尝试使用$.ajax，$.getJSON但没有显示值

我的 json 页面是

{"SelectEmployeeResult": [
{
"Address":"Pune",
"DateOfBirth1":"11\/11\/1988 12:00:00 AM",
 "FirstName":"Balaji",
"LastName":"Nikam",
"Sex":"Male"
}, 
{
  "Address":"Hyd", 
  "DateOfBirth1":"11\/4\/1988 12:00:00 AM",
  "FirstName":"jaya",
  "LastName":"deokar",
  "Sex":"Female"
}, 
.
.
.
4

1 回答 1

1

你应该像这样使用 $.getJSON 获得价值，

$.getJSON("stackjson.json", function(data) {
    for(emp in data.SelectEmployeeResult) {
        //iterate array here
        alert(data.SelectEmployeeResult[emp].FirstName); 
    } 
});

这是整个工作代码，

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
      $("#DisplyEmp").click(function() {
          $.getJSON("yourjsonurl", function(data) {
              for(emp in data.SelectEmployeeResult) {
                  console.log(data.SelectEmployeeResult[emp]);
                  var newRow = "<tr>"+
                                  "<td>"+data.SelectEmployeeResult[emp].FirstName+"</td>"+
                                  "<td>"+data.SelectEmployeeResult[emp].LastName+"</td>"+
                                  "<td>"+data.SelectEmployeeResult[emp].DateOfBirth1+"</td>"+
                                  "<td>"+data.SelectEmployeeResult[emp].Sex+"</td>"+
                                  "<td>"+data.SelectEmployeeResult[emp].Address+"</td>"+
                               "</tr>";
                  $("#EmpNewTable").append(newRow);
              } 
          });
      });
  });
</script>


</head>
<body>
<table id="EmpNewTable" border="2"> 
<tr> 
  <th>First Name</th>
  <th>Last Name</th>
  <th>Birthday</th>
  <th>Sex</th>
  <th>Address</th>
</tr> 
</table><br /><br /> 
<input type="button" id="DisplyEmp" value="Display" />

</body></html>

和这样的结果，

在此处输入图像描述

于 2012-04-07T14:09:01.557 回答