如何在创建XML或JSON后创建动态HTML
如何在创建XML或JSON后创建动态HTML
提问于 2016-08-12 21:23:40
我需要创建一个动态的网页，在那里一个外行用户可以输入信息，就像他正在编辑XML或JSON一样，之后需要将此html转换为json。
为了转换html json，我找到了几个使用ajax的例子，比如：
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$(function() {
$('form').submit(function() {
$('#result').text(JSON.stringify($('form').serializeObject()));
return false;
});
});但我不知道是否有可能制作一个html，其中的元素可以作为JSON排序。
我找到了一个使用Bootstrap创建动态表单的示例，如下所示：http://minikomi.github.io/Bootstrap-Form-Builder/
问题是:对这些元素进行排序以转换为JSON？如何知道数组在哪里，或者只是键值集合？
有可能创造一些东西吗？
场景:今天开发人员创建了一个JSON来将信息输入到系统中，我们希望商业人士可以在不了解JSON的情况下通过一个友好的界面来做到这一点。
提前谢谢你！
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-01 22:28:52
您可以尝试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test 1</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
createTextBox('formulario','campo1','valor1');
});
function createTextBox(parent, name, value)
{
var node = '<div class="node" id="node_'+name+'">'
+ '<input placeholder="" type="text" id="value_'+name+'" name="value_'+name+'" value="'+value+'" />'
+ '<input placeholder="" type="text" id="value2_'+name+'" name="value2_'+name+'" value="'+value+'" />'
+ '<input placeholder="" type="text" id="parent_'+name+'" name="parent_'+name+'" value="'+parent+'" />'
+ '<div id="nested_'+name+'" style="padding-left: 10%;" ><a href="#" onclick="addNested(this)" >ADD NESTED</a></div>'
+'</div>';
$('#'+parent).append(node);
//parse2Json();
}
function addNested(object)
{
var name = getNewName();
createTextBox(object.parentElement.id, name , name);
}
function getRandomName() {
var ret;
if (!Date.now) {
ret = function() { return new Date().getTime();
}
} else {
ret = Date.now();
}
return ret;
}
function getNewName() {
var ret = $("#count_campo").val();
$("#count_campo").val(parseInt(ret)+1);
return ret;
}
function parse2Json()
{
//pegando todos os elementos node
$('.node').each(function(index, obj) {
alert("pai:"+ obj.parentElement.id);
alert("id:"+ obj.id);
alert("Campo 1: Id["+$("#"+obj.id).children(1).attr('name') +"] Value["+$("#"+obj.id).children(1).val()+"]");
alert("Campo 2: Id["+$("#"+obj.id).children(2).attr('name') +"] Value["+$("#"+obj.id).children(2).val()+"]"); // IGUAL -> //var c = obj.childNodes[2].text;
//getting all elements inside div
var array = Array.prototype.slice.call(obj.childNodes);
array.forEach(function(objecto_filho) {
alert("Dentro Foreach: "+ objecto_filho.id);
});
//ou
});
}
</script>
</head>
<body>
<input type="text" id="count_campo" name="count_campo" value="1" />
<h1>Testes XML config</h1>
<div id="formulario">
</div>
</body>
</html>Stack Overflow用户
发布于 2016-08-12 21:49:54
如果我理解正确的话，您需要从XML或JSON文件动态创建界面元素。一种可能的方法是：
//Stored elements description for dynamic creation. Value if you need to store users data from elements
var dynamicElements = {
'firstName' :{
'type': 'input',
'value': ''
},
'lastName': {
'type': 'input',
'value': ''
}
}
for (elementId in dynamicElements) {
var elementDescription = dynamicElements[elementId];
var element = document.createElement(elementDescription.type);
element.id = elementId;
//do smth ... append it to form or any container
}要将html转换为Json代码，您可以为客户的所有动态输入添加类。转换为JSON可能如下所示：
var inputsData = [];
jQuery(".oneOfMyAwesomeDynamicElements").each(function(index, element) {
inputsData.push({
'type': element.tagName,
'value': element.value,
'id': element.id
//all element attribute you need
});
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38919087
复制相关文章
相似问题
腾讯云开发者
