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 に答える