如果我了解您在寻找什么，那么结合使用 jQuery 和一个易于解析的响应框架（如 JSON）可能就是您想要的。如果你使用 PHP，你可以很容易地创建一个大型的表单数据嵌套数组，然后将其打印为 JSON，如下所示：
<?php
$form1Array = array(
array('type'=>'text','name'=>'input_a','id'=>'input_a','value'=>'Example default value','label'=>'Input A'),
array('type'=>'text','name'=>'input_b','id'=>'input_b','label'=>'Input B'),
array('type'=>'password','name'=>'input_c','id'=>'input_c','label'=>'Input C'));
$form2Array = array(
array('type'=>'text','name'=>'input_d','id'=>'input_d','label'=>'Input D'),
array('type'=>'text','name'=>'input_e','id'=>'input_e', 'label'=>'Input E'),
array('type'=>'password','name'=>'input_f','id'=>'input_f', 'label'=>'Input F','can_replicate'=>true));
$output = array('form_1'=>array('id'=>'form_1','label'=>'Form 1','elements'=>$form1Array,'can_replicate'=>true),'form_2'=>array('id'=>'form_2','label'=>'Second form','elements'=>$form1Array));
echo json_encode($output,JSON_PRETTY_PRINT);
?>
这显然需要修改以从您的数据库输出实际构建结构，但这应该是一个相当简单的过程。该示例的输出将为您提供一个不错的 JSON 输出，您可以使用 jQuery 对其进行解析：
{
"form_1": {
"id": "form_1",
"label": "Form 1",
"elements": [
{
"type": "text",
"name": "input_a",
"id": "input_a",
"value": "Example default value",
"label": "Input A"
},
{
"type": "text",
"name": "input_b",
"id": "input_b",
"label": "Input B"
},
{
"type": "password",
"name": "input_c",
"id": "input_c",
"label": "Input C"
}
],
"can_replicate": true
}
}
之后，您只需查询您的 php 页面并将输出信息组装成表单和元素：
<!DOCTYPE html5>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //wait for the whole document to load before modifying the DOM
$.ajax({
url: "test.php",
success: function(data, status, jqXHR) {
var formData = jQuery.parseJSON(data);
$.each(formData, function(id, formInfo){ // function(key, value); In the PHP example, I used the key as the form ID, with the value containing the array of form data
var newForm = $('<form></form>'); //Create an empty form element
newForm.attr('id',formInfo.id); //Set the form ID
$.each(formInfo.elements,function(key, formInput){ //I didn't place a key on the inputs, so the key isn't used here
var newInput = $('<input></input>'); //Create a new empty input
newInput.attr({'id':formInput.id,'type':formInput.type,'name':formInput.name});
if(formInput.value != null){ //If a default value is given
newInput.val(formInput.value); //Set that value
}
if(formInput.label != null){
var newLabel = $('<label></label>');
newLabel.attr('for',formInput.label); //Set the ID that this label is for
newLabel.html(formInput.label); //Set the label text
newForm.append(newLabel);
}
newForm.append(newInput);
if(formInput.can_replicate != null && formInput.can_replicate == true){
//Place code here to insert a button that can replicate the form element
//I'm just going to put a plus sign here
newForm.append('<a href="#">+</a>');
}
newForm.append('<br />');
});
if(formInfo.can_replicate != null && formInfo.can_replicate == true){
//put code here to insert a button that replicates this form's structure
}
if(formInfo.label != null){
var newLabel = $('<label></label>');
newLabel.attr('for',formInfo.id);
newLabel.html(formInfo.label);
$('#form_container').append(newLabel);
}
$('#form_container').append(newForm);
});
}
})
});
</script>
</head>
<body>
<h1>Testing</h1>
<div id="form_container">
</div>
</body>
</html>
毕竟，这是示例应该产生的输出：