如何在 JQuery 表单构建器中使用 JSON 呈现表单

Posted

技术标签:

【中文标题】如何在 JQuery 表单构建器中使用 JSON 呈现表单【英文标题】:how to render a form using JSON in JQuery Form builder 【发布时间】:2021-10-22 20:21:34 【问题描述】:

我有一个简单的 Web 应用程序,我可以在其中创建表单并将其 JSON 保存在数据库中,然后获取相同的 JSON 并将其渲染回来,所有这些都是使用在线提供的 Jquery FormBuilder 构建的。现在,我正在努力处理渲染部分,因为它不显示任何内容,而且我对 java 脚本的了解非常有限,无法修复它。

这是我到目前为止所做的事情

对于 php 方面,我可以采用 Json 模式并将其提供给变量,我对其进行了测试,并且值在那里并且可以打印

$json=$row['survey_schema'];

对于java脚本部分

var container = $('#formrender');var options = 
container,
dataType:'json',
formData:'<?php $json ?>' ; container.formRender(options);

html

<div id="formrender"></div>

据我了解,该脚本会查找名为 formrender 的 div,并根据我提供给它的 JSON 呈现表单。 但什么也没有发生,它只是一个空白屏幕

谢谢你,对不起我的英语不好

【问题讨论】:

【参考方案1】:

这可以在 jQuery Form builder 文档中找到,我就是这样做的:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-render.min.js"></script>
<script>
    jQuery($ => 
        const escapeEl = document.createElement("textarea");
        const code = document.getElementById("formrender");
        const formData = "";//Your JSON data goes here
        const addLineBreaks = html => html.replace(new RegExp("><", "g"), ">\n<");

        // Grab markup and escape it
        const $markup = $("<div/>");
        $markup.formRender( formData );

        // set < code > innerText with escaped markup
        code.innerHTML = addLineBreaks($markup.formRender("html"));

        hljs.highlightBlock(code);
    );
</script>

【讨论】:

不幸的是不起作用。我在表单数据中回显 json,什么也没有 你在使用这个链接formbuilder.online ??如果是,那么您必须以特定方式设置 json 数据。你可以在这里查看演示数据formbuilder.online/docs/formRender/options/render。 问题不在于我认为的 json,我什至复制并粘贴了他们自己的示例。它只创建一个带有 json 的文本区域,而不是渲染表单 按照文档来解决问题。或给我您的电子邮件,我将向您发送一个工作示例。 谢谢你,我确实用你的例子解决了这个问题,但是我在 html 中有一些错字导致它无法渲染

以上是关于如何在 JQuery 表单构建器中使用 JSON 呈现表单的主要内容,如果未能解决你的问题,请参考以下文章

如何在 symfony2 控制器中发送 JSON 响应

如何使用 jQuery 交换选择字段中的所有选项

如何使用 jquery 构建动态表单构建器

如何在 jQuery 日期选择器中为禁用日期添加工具提示?

如何在 Jquery 中将 MVC 表单序列化为 JSON

如何使用 jQuery AJAX 和 JSON 通过 Bootbox 确认表单提交