时间戳

首页 > 解决方案 > 如何在 JQuery 表单构建器中使用 JSON 呈现表单

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

问题描述

我有一个简单的 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 呈现表单。但什么也没有发生，它只是一个空白屏幕

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

标签： javascriptjqueryjson

解决方案

这可以在 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>

推荐阅读