从粘贴的 JSON 转储动态自动完成表单

Autocomplete form from pasted JSON dump dynamically

本文关键字：表单 动态 转储 JSON      更新时间：2023-09-26

我正在尝试创建一段代码，该代码将读取一段JSON并在同一页面上从内容中自动填充单独的字段。我希望能够将 JSON 块复制/粘贴到表单文本区域中，并从粘贴的 JSON 中填充单独的文本字段。

<form>
<textarea name="jsondump">Paste JSON here...</textarea>
<button type="button" name="populate">Populate</button> 
<input type="text" name="field1" value=""></input>
<input type="text" name="field2" value=""></input>
<input type="submit" value="Submit"></input>
</form>

因此，如果我粘贴一段 JSON，例如： 

{"field1": "Apple", "field2": "Orange"}

进入文本区域，单击填充按钮将解析 JSON 并更新文本输入。

（我知道将JSON从一个应用程序直接发送到另一个应用程序会容易得多，但是它们位于两个不同的服务器上，没有交互）。

我认为这应该是 javascript 可以实现的，任何指针将不胜感激！

您可以使用模板语言（如车把或下划线）从数据填充标记。

下面是一个快速示例，说明如何使用下划线和 jquery 来做到这一点。

JSbin演示

.JS：

var template = _.template(
  $( "script.template" ).html()
);
$('.form__btn').on('click', function(e){
    var data = $('.form__json').val();
    try {
        data = JSON.parse(data);
    }
    catch (e){
        console.log(data + " is not valid JSON");
        return;
    }
    $('.form__inner').html(template(data));
});

目录

  <div class="form">
    <textarea name="jsondump" class="form__json">Paste JSON here...</textarea>
    <button type="button" name="populate" class="form__btn">Populate</button> 
    <div class="form__inner"></div>
  </form>
  <script type="text/template" class="template">
    <form>
      <input type="text" name="field1" value="<%= field1 %>"></input>
      <input type="text" name="field2" value="<%= field2 %>"></input>
      <input type="submit" value="Submit"></input>
    </form>
  </script>

请注意，这适用于粘贴的示例

{"field1": "Apple", "field2": "Orange"}
相关文章：