Tạo biểu mẫu HTML từ nguồn cấp JSON hoặc XML bằng cách sử dụng JQuery

Question

Tôi muốn tạo biểu mẫu HTML dựa trên dữ liệu XML hoặc JSON bằng cách sử dụng Jquery và tôi cũng có kế hoạch xác thực bất kỳ trường biểu mẫu nào có thể trống hoặc không chính xác.

Tôi muốn biết liệu có bất kỳ chương trình/chức năng nào khác tạo ra một biểu mẫu động một cách tự động khi đang di chuyển hay không và cách tốt nhất để thực hiện điều này. Bất kỳ tiện ích hoặc thư viện jquery nào hoạt động tốt nhất với các ví dụ về hoạt động sẽ được đánh giá cao

Và cũng nên sử dụng nguồn cấp dữ liệu nào để sử dụng tốt nhất trong trường hợp này XML hoặc JSON và giải thích tại sao?

Cảm ơn

Answer 1

Tôi đã tìm thấy một số trong những có thể giúp bạn:

hình thức Tạo từ schema JSON:

• how to create a html form using a JSON definition?
• http://neyric.github.com/inputex/examples/json-schema.html
• JavaScript to generate/render dynamic HTML form from JSON or similar data?
• Any tool to generate html form

hình thức Tạo từ một lược đồ XML:

• http://www.totallysmartit.com/examples/xml/questionnaire/
• Create HTML form from XML
• http://www.datamech.com/XMLForm/

mẫu từ khác nhau thư viện để tạo ra hình thức:

• http://www.alpacajs.org/examples.html
• http://jsonforms.io/#/examples
• http://schemaform.io/examples/bootstrap-example.html

Answer 2

Chỉ cần để cung cấp cho bạn sự lựa chọn khác, thư viện tôi đã tạo:

https://github.com/brutusin/json-forms

Giản đồ JSON vào trình tạo biểu mẫu HTML, hỗ trợ các trình phụ trợ động (trên độ phân giải bay). Thư viện mở rộng và tùy biến với không phụ thuộc. Bootstrap add-on được cung cấp

var bf = brutusin["json-forms"].create({ 
 
    "$schema": "http://json-schema.org/draft-03/schema#", 
 
    "type": "object", 
 
    "properties": { 
 
    "s1": { 
 
     "type": "string", 
 
     "title": "A string", 
 
     "description": "A string input" 
 
    }, 
 
    "num1": { 
 
     "type": "integer", 
 
     "title": "A number", 
 
     "minimum": 1, 
 
     "maximum": 10, 
 
     "multipleOf": 3, 
 
     "description": "An integer multiple of `3`, between `1` and `10` (inclusive)" 
 
    }, 
 
    "array1": { 
 
     "type": "array", 
 
     "title": "An array values", 
 
     "items": { 
 
     "type": "object", 
 
     "properties": { 
 
      "value": { 
 
      "type": "string", 
 
      "title": "Value" 
 
      } 
 
     } 
 
     } 
 
    } 
 
    } 
 
}); 
 
var container = document.getElementById('container'); 
 
bf.render(container);

<link rel="stylesheet" href='https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/css/brutusin-json-forms.min.css'/> 
 
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'/> 
 
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms-bootstrap.min.js"></script> 
 
<div id="container"></div> 
 
<hr> 
 
<button class="btn btn-primary" onclick="alert(JSON.stringify(bf.getData(), null, 4))">getData()</button>&nbsp;<button class="btn btn-primary" onclick="if (bf.validate()) {alert('Validation succeeded')}">validate()</button>

Thêm ví dụ sống tại http://brutusin.org/json-forms