使用 Json 文件时出现“jQuery 模板”问题答案

【问题标题】：I have problem with "jQuery template" when using Json file使用 Json 文件时出现“jQuery 模板”问题
【发布时间】：2020-01-13 23:50:42
【问题描述】：

我在使用 Json 文件时遇到“jQuery 模板”问题。当我使用下面的代码时，我没有收到任何错误，但是它不起作用。

当我将数据Json的内容定义为变量时，问题就解决了。但是每当我尝试使用 Json 文件时，它都不起作用

我对此感到非常兴奋，但没有找到任何东西。请指导我。

  <script type="text/javascript">
    $(function() {
      jQuery.getJSON("js/data.json", function(myData) {
        $("#ourTemplate").tmpl(myData).appendTo("#tableContent");

      });


    })
  </script>
  <script id="ourTemplate" type="text/x-jquery-tmpl">
    <tr>
      <td>${username}</td>
      <td>${name}</td>
      <td>${skills}</td>
      <td>${age}</td>
    </tr>
  </script>

<!DOCTYPE html>
<html lang="fa" dir="ltr">
<title>jQuery templates</title>

<head>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" charset="utf-8"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" charset="utf-8"></script>


</head>

<body>
  <table border="1">
    <thead>
      <th>username</th>
      <th>name</th>
      <th>skills</th>
      <th>age</th>
    </thead>
    <tbody id="tableContent">

    </tbody>
  </table>
</body>

</html>

json文件：

[{
    name: "milad",
    username: "mldv404",
    skills: "php , javascript , css , jQuery",
    age: 24,
  },
  {
    name: "hamid",
    username: "hamidJ",
    skills: "Mysql , javascript , css , jQuery",
    age: 25,
  },
  {
    name: "hossein",
    username: "hosseindavari",
    skills: "java , simpless , document , jQuery",
    age: 34,
  },
  {
    name: "davood",
    username: "davoodSun",
    skills: "visial Basic , dot net7 , c++ , jQuery",
    age: 24,
  },
  {
    name: "zahra",
    username: "sunMedia",
    skills: "python , hibernate , AJax , PostgerSql",
    age: 24,
  },
  {
    name: "mohsen",
    username: "msnv",
    skills: "vbScript , php , javascript , jQuery",
    age: 24,
  },
  {
    name: "mahdi",
    username: "mhdi23",
    skills: "php , javascript , css , jQuery",
    age: 24,
  },
];

【问题讨论】：

标签： javascript jquery jquery-templates

【解决方案1】：

当我将一个数据Json的内容定义为变量时，问题就解决了

那是因为您的“JSON”实际上不是 JSON；它只是一个普通的 JavaScript 对象。更多信息请看这里：https://stackoverflow.com/a/3975890/7290573

将 JSON 文件的内容更改为以下内容，它将起作用（注意键名周围的引号）：

[
    {
        "name": "milad",
        "username": "mldv404",
        "skills": "php , javascript , css , jQuery",
        "age": 24
    },
    {
        "name": "hamid",
        "username": "hamidJ",
        "skills": "Mysql , javascript , css , jQuery",
        "age": 25
    },
    {
        "name": "hossein",
        "username": "hosseindavari",
        "skills": "java , simpless , document , jQuery",
        "age": 34
    },
    {
        "name": "davood",
        "username": "davoodSun",
        "skills": "visial Basic , dot net7 , c++ , jQuery",
        "age": 24
    },
    {
        "name": "zahra",
        "username": "sunMedia",
        "skills": "python , hibernate , AJax , PostgerSql",
        "age": 24
    },
    {
        "name": "mohsen",
        "username": "msnv",
        "skills": "vbScript , php , javascript , jQuery",
        "age": 24
    },
    {
        "name": "mahdi",
        "username": "mhdi23",
        "skills": "php , javascript , css , jQuery",
        "age": 24
    }
]

【讨论】：