创建通过AJAX加载的编辑对话的最有效方法

Question

我有几个从后端读取数据的AJAX API，其中大多数都有用于回写编辑内容的对应物。

示例：

1. getSalaries / editSalaries，
2. getParticipants / editParticipants，
3. getPermissions / editPermissions以及其他几个。

每个API对应后端的1或2个MySQL表。

要为这些读取 - 编辑 - 写入功能中的每一个创建对话，我不想编写一大堆HTML / JS / jQuery，除了标签/ textbox-ID中的一些更改之外，它们将非常相似。

有没有办法可以指定JSON格式的表格，每个单元格都在其中：

1. 要显示的标签名称
2. 要填充的AJAX数据中的字段
3. 一种要显示的HTML控件

还有一些UI库自动处理后端数据的读取，在对话框中填充数据，然后读取编辑后的值并调用AJAX写回后端？

示例：我应该能够在JSON中将表指定为：

{
   "rows":
   [
       // Row 1
       [
          // Column 1
          {"label": "Participant-name", "ajax-field": "pname", "html-control": "text"},
          // Column 2
          {"label": "Age", "ajax-field": "age", "html-control": "text"},
          // Column 3
          {"label": "Sex", "ajax-field": "sex", "html-control": "option"}
       ],
       // If more than 1 row here, then rows for one entity should be
       // grouped together in a field-set without name.
   ],
   "read-url": "/getParticipants",
   "write-url": "/editParticipants"
}

这种解决方案的好处是：

1. 编写JSON比编写HTML要容易得多（XML过于冗长）。
2. 我不必一遍又一遍地将代码写入ajax-read / display和UI-read / ajax-write。

我认为我的大多数代码都符合表格格式（使用添加/删除/保存/取消按钮）。