Question

使用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,
  },
];

Answer 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
    }
]

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

1 个答案: