我在使用 Json 文件时遇到 "jQuery template" 问题
I have problem with "jQuery template" when using Json file
我在使用 Json 文件时遇到 "jQuery template" 问题。当我使用下面的代码时,我没有收到任何错误,但是它不起作用。
当我将一个数据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,
},
];
The problem is solved when I define the contents of a data Json as a variable
那是因为你的 "JSON" 实际上不是 JSON;它只是一个普通的 JavaScript 对象。有关详细信息,请参阅此处:
将 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 template" 问题。当我使用下面的代码时,我没有收到任何错误,但是它不起作用。
当我将一个数据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>
[{
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,
},
];
The problem is solved when I define the contents of a data Json as a variable
那是因为你的 "JSON" 实际上不是 JSON;它只是一个普通的 JavaScript 对象。有关详细信息,请参阅此处:
将 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
}
]