Question

我试图在连接到xampp中的tomcat时将json数据提取到表中。单击按钮后，我无法获取数据。数据不需要出现。

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
</head>
<body>
<br><br><br>
<div id="adminpage">
<h1 id="contentheader">Admin Page</h1>
<button class="getleads">Show Lead</button>
<br><br>
<table class="leadstable" border="2" align="center">
<thead>
  <th>Name</th>
  <th>Phone</th>
  <th>Email Address</th>
  <th>Nationality</th>
  <th>Qualification</th>
  <th>Course</th>


</thead>

<tbody id="tdata">



</tbody>

</table>

</div>

</body>
</html>

script.js

$(document).ready(function(){
$(".getleads").click(function(){
    $.getJSON("jsoncontent.json", function(data){
      $.each(data, function(key, value){
$("#tdata").append("<tr>" + "<td>" + value.name + "</td>" + "</tr>")
      });
    });
  });
});

jsoncontent.json

{
  "leads": [
      {
          "name": "Steady",
          "phone":"98574856",
          "email": "SteadyLim@Email.com",
          "nationality":"Singaporean",
          "qualification":"GCE A-Level",
          "course":"Diploma in Web Development"
      },
      {
          "name": "Michelee",
          "phone":"85748596",
          "email": "Micheleeyoke@nomail.com",
          "nationality":"foreigner",
          "qualification":"PSLE",
          "course":"Diploma in Computer Science"
      },
      {
          "name": "Oleary",
          "phone":"94857458",
          "email": "Olearynut@youmail.com",
          "nationality":"Singaporean",
          "qualification":"GCE O-Level",
          "course":"Diploma in Web Development"
      }
  ]
}

我希望在单击该.getleads按钮后显示json数据。至于现在，当我单击按钮时，没有错误，但是仅仅是json数据无法追加到我的表中。

Answer 1

您的JSON是具有单个属性leads的对象，该属性是对象数组。

$.JSONget将在传递给处理程序的data参数中返回该对象。您的处理程序正在调用Object的{{1}}覆盖。该处理程序将使用jQuery.each = key和"leads" =存储在value属性中的数组精确调用一次。该数组没有名为“名称”的成员。您想改为传递leads属性的内容给.each，以便它调用leads覆盖。

将代码修改为：

Array

使用模拟数据的示例：

$(function(){
  $(".getleads").click(function(){
    $.getJSON("jsoncontent.json", function(data){
      $.each(data.leads, function(index, value){
        $("#tdata").append("<tr>" + "<td>" + value.name + "</td>" + "</tr>")
      });
    });
  });
});

$(function(){
  $(".getleads").click(function(){
    //$.getJSON("jsoncontent.json", function(data){
      $.each(data.leads, function(index, value){
        $("#tdata").append("<tr>" + "<td>" + value.name + "</td>" + "</tr>")
      });
    //});
  });
});

let data =
{
  "leads": [
    {
      "name": "Steady",
      "phone":"98574856",
      "email": "SteadyLim@Email.com",
      "nationality":"Singaporean",
      "qualification":"GCE A-Level",
      "course":"Diploma in Web Development"
    },
    {
      "name": "Michelee",
      "phone":"85748596",
      "email": "Micheleeyoke@nomail.com",
      "nationality":"foreigner",
      "qualification":"PSLE",
      "course":"Diploma in Computer Science"
    },
    {
      "name": "Oleary",
      "phone":"94857458",
      "email": "Olearynut@youmail.com",
      "nationality":"Singaporean",
      "qualification":"GCE O-Level",
      "course":"Diploma in Web Development"
    }
  ]
}

您可能还想使用jQuery的最新版本。

Answer 2

我认为这会对您有所帮助

$(document).ready(function(){
$(".getleads").click(function(){
$.getJSON("jsoncontent.json", function(data){
$.each(data, function(key, value){
for(i=0;i<=value.length;i++){ //I used for loop to get each names of three objects present in value array
$("#tdata").append(
"<tr>" + "<td>"+
value[i].name+
"</td>" + "</tr>");
}
});});});});

您的value是array，由三个对象组成

所以我使用name呼叫了每个value[i].name

最后我们得到了：

value[0].name = "Steady";
value[1].name = "Michelee";
value[2].name = "Oleary";

Answer 3

经过繁琐的编辑后，此代码已成功运行，感谢所有帮助！

adminpage.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ABC Learning Centre</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
    <div id="adminpage">
      <br><br>
      <h1 id="contentheader">Admin Page</h1>
      <br>
    <button id="getlead" onclick="loadLeads()">Show Leads</button>
    <br><br><br>
      <table class="leadstable" border="2" align="center">
          <col width="100">
          <col width="100">
          <col width="200">
          <col width="130">
          <col width="150">
          <col width="350">
          <col width="200">

      <thead>
        <th>Name</th>
        <th>Phone</th>
        <th>Email Address</th>
        <th>Nationality</th>
        <th>Qualification</th>
        <th>Course</th>
        <th>Action</th>
      </thead>
      <tbody id="tdata">
      </tbody>
      </table>

    </div>
<div class="footer">
<ul class="footercontent1">
    <li><h3>About ABC</h3></li>
    <li><a href="#" data-target="home.html">Home</a></li>
    <li><a href="#" data-target="aboutus.html">About Us</a></li>
    <li><a href="#" data-target="privacypolicy.html">Privacy Policy</a></li>
    <li><a href="#" data-target="sitemap.html">Sitemap</a></li>
</ul>

<ul class="footercontent2">
<li><h3>Certifications</h3></li>
<li><img src="image/SSG.png" width="80" height="80"></li>
</ul>


<ul class="footercontent3">
    <li><h3>Look For Us</h3></li>
    <li>123 Anatasha North Street<br>555123<br>#01-12</li>

    <li><h3>Operating Hours</h3></li>
    <li>Monday to Saturday<br>9:00am - 10:00pm<br>Closed on Sunday and Public Holidays</li>


</ul>
<ul class="footercontent4">
<li><h3>Connect With Us</h3></li>
<li><a href="http://www.facebook.com"><img src='image/facebook.PNG' width="70" height="70" /></a>
    &nbsp;&nbsp;<a href="http://www.twitter.com"><img id="twitterimage" src='image/twitter.png' width="70" height="70" /></a>
    &nbsp;&nbsp;<a href="http://www.instagram.com"><img src='image/instagram.png' width="70" height="70" /></a></li>
</ul>

<p id="footercopyright"><br><br>Copyright © 2018 ABC Learning Centre, Singapore. All rights reserved.</p>
</div>

</body>
</html>

script.js

var leads = [];
function loadLeads()
{   $.getJSON('jsoncontent.json', function (data) {
       $.each(data.leads, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.name + "</td>" +
           "<td>" + f.phone + "</td>" + "<td>" + f.email + "</td>" + "<td>" + f.nationality + "</td>" + "<td>" + f.qualification + "</td>" + "<td>" + f.course + "</td>"
           + "<td>" + "<button>Edit</button>" + "   " + "<button>Delete</button>" + "</td>" + "</tr>";
           $(tblRow).appendTo(".leadstable tbody");
     });

   });
  };

jsoncontent.json

{
  "leads": [
      {
          "name": "Steady",
          "phone":"98574856",
          "email": "SteadyLim@Email.com",
          "nationality":"Singaporean",
          "qualification":"GCE A-Level",
          "course":"Diploma in Web Development"
      },
      {
          "name": "Michelee",
          "phone":"85748596",
          "email": "Micheleeyoke@nomail.com",
          "nationality":"foreigner",
          "qualification":"PSLE",
          "course":"Diploma in Computer Science"
      },
      {
          "name": "Oleary",
          "phone":"94857458",
          "email": "Olearynut@youmail.com",
          "nationality":"Singaporean",
          "qualification":"GCE O-Level",
          "course":"Diploma in Web Development"
      }
  ]
}

我的答案已解决感谢所有帮助过的人！现在，我的表格会附加来自JSON文件的数据，甚至显示我添加的按钮！

将JSON数据获取到HTML表onclick按钮

3 个答案: