使用 jQuery formbuilder 渲染 JSON 表单

Posted 2023-05-09

【中文标题】使用 jQuery formbuilder 渲染 JSON 表单

【英文标题】：Rendering a JSON form using jQuery formbuilder

【发布时间】：2018-01-23 06:58:00

【问题描述】：

我想使用 jQuery formbuilder (https://formbuilder.online/docs/) 并想在我的网页上呈现 Formbuilder 生成的 JSON 表单。

有人可以帮助展示我如何使用 ColdFusion 实现这一目标吗？

这是 Formbuilder 生成的 JSON 示例：

[
    
        "type": "date",
        "label": "Date Field",
        "className": "form-control",
        "name": "date-1502794115227"
    ,
    
        "type": "button",
        "label": "Button",
        "subtype": "button",
        "className": "btn-default btn",
        "name": "button-1502794117421",
        "style": "default"
    
]

如何在页面上显示表单？我不熟悉 JSON。如果我可以反序列化 JSON 并返回实际的 html 源代码，那就太理想了。

JSON 由 Formbuilder 显示，但我也不知道如何将 JSON 转换为我可以使用的 ColdFusion 结构或变量。有什么想法吗？

【问题讨论】：

在您提交表单之前，ColdFusion 不会进入等式。

正如@DanBracuk 提到的，到目前为止您所问的与ColdFusion 无关。都是 jQuery 和 formbuilder 插件。正如您提供的链接所述 - jQuery formBuilder 是 100% 客户端插件 ColdFusion 在服务器端运行。该文档链接中还包含许多演示和示例代码。浏览这些演示，然后如果您有任何问题，请返回并提出更具体的问题。

感谢您的回复。让我再解释一下。我想使用表单生成器，然后发布 HTML 表单。我需要实际渲染的表单源。我不知道如何从表单生成器生成的内容中获取表单源。

页面上连表格都没有？我建议您返回 FormBuilder 页面并阅读入门部分。这是您遇到的 HTML/CSS/javascript+jQuery 问题。只有在您获得页面上的表单并提交后，ColdFusion 才会参与其中。

【参考方案1】：

正如您问题中的 cmets 所建议的那样，为您提供的 JSON 输出只是表单结构外观的预览。

第 1 步：保存表单结构

您需要首先在“保存”按钮上挂钩一个操作，以将此结构保存到您的数据库中。使用 jQuery，这将如下所示（假设您的 formBuilder 将位于属性为 id="form-builder" 的元素中）。 把它放在你的表单构建器页面中加载的 JS 文件中：

// Initialise the form builder
var fb = $( '#form-builder' ).formBuilder();

// Post the data to a script which will save it to your db
$( '.save-template' ).on( 'click', function()

    $.ajax(
        url: 'save-form.cfm', // Point this to the file you create to save data
        type: 'POST',
        data: 
            formStructure: JSON.stringify( fb.actions.getData('json') )
        ,
        success: function( response )

            // Got a response
            console.log( 'Response from the save action: ' + response );

        ,
        error: function( jqXHR )

            // Something went wrong
            console.log( 'Error saving the form (details below)' );
            console.log( jqXHR );

        

    );

然后在 CF 中，使用deserialiseJSON。

save-form.cfm - 标签语法

<!--- Converts JSON string to CF ARRAY (not struct - the JSON is an array of fields) --->
<cfset formStructure = deserializeJSON( form.formStructure ) />

save-form.cfm - 脚本语法

// Converts JSON string to CF ARRAY (not struct - the JSON is an array of fields)
formStructure = deserializeJSON( form.formStructure );

然后循环遍历数组（再次注意，formBuilder JSON 输出为字段数组，而不是结构）按您的意愿操作并将表单结构插入到您的数据库（以 JSON 格式删除反序列化和循环或作为使用关系数据库工作的单个字段）。

第 2 步：为用户加载表单

这比您想象的要复杂得多 - 我最近正在处理这个问题，并最终重写了整个 formRender 库以更好地满足我们的需求。

如果您不熟悉这种方法，我建议您只需加载 formRender.js（提供表单生成器安装）并阅读有关此的文档（嗯？）。

另一方面，如果您想像我一样单独解析字段，那么您可以遍历数组，获取每个字段（这将是一个结构）并根据您找到的内容输出标记。我会向您展示我所做的一些事情，但它是一个相互调用的函数库，这个答案最终会太长！

希望这对你有所帮助

JC