使用 jQuery jPut 将 JSON 转换为 HTML
Posted
技术标签:
【中文标题】使用 jQuery jPut 将 JSON 转换为 HTML【英文标题】：Converting JSON to HTML with jQuery jPut 【发布时间】：2014-11-18 11:06:08 【问题描述】：我正在研究 jQuery jPut JSON to html，但是在学习这个插件时，我在尝试将一些 JSON 数据转换为 HTML 时遇到了困难。
我提供了我的 JSON 数据示例。如何将其转换为 HTML？我还没找到解决办法。
"info":[
"headername": "json-table",
"title": "json-table",
"description": "jQuery plugin for rendering custom tables from JSON data.",
"keywords": ["table", "json", "ui"],
"version": "0.1.3",
**"author":
"authorname": "Klaus Ganser",
"url": "http://kganser.com"
**,
"maintainers": [
"assname": "Klaus Ganser",
"url": "http://kganser.com"
],
"licenses": [
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
],
"bugs": "https://github.com/kganser/json-table/issues",
"homepage": "http://kganser.com/json-table.html",
"docs": "http://kganser.com/json-table.html",
"dependencies":
"jquery": ">=1.0"
]
这是我的 HTML 文件：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jput.min.js"></script>
<script>
$(document).ready(function()
//The div you want to upload
$('#detailsShow').jPut(
dataName:'info',
ajax_url:'json-table.jquery.json',
ajax_type:'post',
prepend:true,
name:'details', //jPut Template name
error:function(msg)
alert(msg);
);
);
</script>
</head>
<body>
<!--jPut HTML Template (it will he hidden)-->
<div jput="details">
<h3>headername</h3>
<ul>
<li>Title: title</li>
<li>Description: description</li>
<li>Keywords: keywords</li>
<li>Version: version</li>
<li><a href="url">authorname</a></li>
</ul>
</div>
<div id="detailsShow"></div>
</body>
</html>
【问题讨论】：
显示什么错误？ 【参考方案1】：问题在于您的 json。 json 无效。
始终尝试检查您的 json 是否有效。 您可以在此站点http://jsonlint.com/ 中检查您的 json 是否有效。
您的 json 无效，因为 **"author": 附近有 *
请删除该 *.
它会正常工作的。
【讨论】：
以上是关于使用 jQuery jPut 将 JSON 转换为 HTML的主要内容，如果未能解决你的问题，请参考以下文章
将 Angular 2 签名板 JSON 转换为 jQuery.signaturePad JSON
如何使用 jquery 将 Div 数据转换为 json 格式