无法在HTML页面上显示JSON文件中的数据。

huangapple
go评论105阅读模式
英文:

I can’t display the data from the json file on the html page

问题

Script.js和test.json位于'public'文件夹中。我需要在HTML页面中显示test.json中的数据。
script.js：

  1. $(document).ready(function() {
  3.   let qqq = 'test.json';
  4.   let www = JSON.parse(qqq);
  5.   document.getElementById("eee").innerHTML = www;
  6. });

server.js：

  1. var express = require("express");
  2. var path = require("path");
  3. var app = express();
  4. app.get("/", function(req, res) {
  5.   res.sendFile(__dirname + "/views/index.html");
  6. });
  8. app.use(express.static(path.join(__dirname, "public")));
  9. app.listen(8008);
  10. console.log("服务器已启动！");

index.html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
  7.     <title>报告</title>
  8.     <link  rel="stylesheet" href="style.css">
  9.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  10.     <script src="script.js"></script>   
  11.   </head>
  12.   <body>
  13.     <div class="red" id="eee"></div>
  14.   </body>
  15. </html>

test.json：

  1. {"tests": [
  2.    { "testName": "testname1",
  3.      "value": "test_value",},
  4.    { "testName": "testname2",
  5.      "value": "test_value",}
  6.   ] }
英文:

Script.js and test.json are located in the 'public' folder. I need to display data from test.json in the html page.
script.js:

  1. $(document).ready(function() {
  3.   let qqq = &#39;test.json&#39;;
  4.   let www = JSON.parse(qqq);
  5.   document.getElementById(&quot;eee&quot;).innerHTML = www;
  6. });

server.js:

  1. var express = require(&quot;express&quot;);
  2. var path = require(&quot;path&quot;);
  3. var app = express();
  4. app.get(&quot;/&quot;, function(req, res) {
  5.   res.sendFile(__dirname + &quot;/views/index.html&quot;);
  6. });
  8. app.use(express.static(path.join(__dirname, &quot;public&quot;)));
  9. app.listen(8008);
  10. console.log(&quot;Server has started!&quot;);

index.html:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3.   &lt;head&gt;
  4.     &lt;meta charset=&quot;UTF-8&quot; /&gt;
  5.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
  6.     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot; /&gt; &lt;title&gt;Report&lt;/title&gt;
  7.     &lt;link  rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  8.     &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;
  9. &gt;&lt;/script&gt;
  10.   &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;   
  11. &lt;/head&gt;
  12. &lt;body&gt;
  13.   &lt;div class=&quot;red&quot; id=&quot;eee&quot;&gt;&lt;/div&gt;
  14. &lt;/body&gt;
  15. &lt;/html&gt;

test.json:

  1. {&quot;tests&quot;: [
  2.    { &quot;testName&quot;: &quot;testname1&quot;,
  3.      &quot;value&quot;: &quot;test_value&quot;,},
  4.    { &quot;testName&quot;: &quot;testname2&quot;,
  5.      &quot;value&quot;: &quot;test_value&quot;,}
  6.   ] }

答案1

得分: 2

  1. let qqq = 'test.json';  // 正在解析 test.json 字符串。
  3. 您可以使用以下方式通过 ajax 从 json 文件中获取数据：
  5. $.ajax({
  6.     type: "GET",
  7.     url: "test.json",
  8.     dataType: "json",
  9.     success: function(data) {
  10.           let www = JSON.parse(data);
  11.           $("#eee").html(www);
  12.     },
  13.     error: function(){
  14.         alert("json 文件未找到");
  15.     }
  16. });
英文: 
  1. let qqq = &#39;test.json&#39;;  //you are parsing test.json string.

you can use ajax to get data from json file as following

  1. $.ajax({
  2.     type: &quot;Get&quot;,
  3.     url: &quot;test.json&quot;,
  4.     dataType: &quot;json&quot;,
  5.     success: function(data) {
  6.           let www = JSON.parse(data);
  7.           $(&quot;#eee&quot;).html(www);
  8.     },
  9.     error: function(){
  10.         alert(&quot;json not found&quot;);
  11.     }
  12. });

huangapple
  • 本文由 发表于 2020年1月3日 19:51:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/59578139.html
  • express
  • javascript
  • jquery
  • node.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定