如何在創建XML或JSON後創建HTML動態

我需要創建一個動態網頁，其中一個外行用戶可以輸入信息，就好像他正在編輯XML或JSON一樣，之後需要將此html轉換爲JSON。如何在創建XML或JSON後創建HTML動態

已經轉換成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。

我發現一個例子來創建動態引導形式是這樣的：http://minikomi.github.io/Bootstrap-Form-Builder/

的疑問是：排序這些元素轉換成JSON？如何知道哪裏會是一個數組或只是一個鍵值集？

可以創建一些東西嗎？

場景：今天開發人員創建了一個JSON來向系統輸入信息，我們希望商業人士可以在不知道JSON的情況下使用友好的界面來做到這一點。

預先感謝您！

來源

2016-08-12 sola.carol

'$ .serializeArray（）'已經給你一個表單字段的排序數組值，看到的是https：// API .jquery.com/serializeArray/- 通常：數組元素將保持其順序，對象屬性沒有固定的順序。如果將表單序列化爲數組，則可以確定排序順序，如果將其序列化爲對象，則屬性順序是隨機的。 –

我擔心的是知道哪個鍵屬於哪個鍵，例如形成數組。 { 「鍵」：{ 「鍵」：[ 「值」，「值」， { 「鍵」：「值」} ] } } –

如果您的形式具有與同多個輸入名稱，該值可以是數組。要檢查它是數組還是字符串，可以遍歷屬性/值並檢查類型，例如'typeof value ==='string''或'Array.isArray（value）'。 –

你可以嘗試：

<!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>

來源

2016-09-01 14:28:51 Vitorlui

感謝您的關注！ –

如果我理解正確，您需要從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 
    }); 
})

來源

2016-08-12 13:49:54 Sabik

不......我需要與之相反的......我需要一個HTML格式的動態佈局，看起來像一個JSON，一個外行人可以輸入信息，就好像該人正在創建一個json（或xml）場景：今天開發人員創建了一個JSON來將信息輸入到系統中，我們希望商業人士可以在不知道JSON的情況下使用友好的界面來做到這一點。 –

抱歉誤會。我更新了答案。 – Sabik

如何在創建XML或JSON後創建HTML動態

回答

相關問題