将外部 json 数据加载到 html 表单中

Posted 2023-05-09

【中文标题】将外部 json 数据加载到 html 表单中

【英文标题】：Load external json data into html form

【发布时间】：2018-07-09 05:41:59

【问题描述】：

如何加载外部 JSON 文件？

注意：外部文件也可能被服务器设置阻止。

使用本地 JSON 填写表单

<form id="datas-from-json">                        
    <div class="form-group">
        <label class="form-control">Name:</label>
        <input name="nameCustomer" class="form-control" type="text" autofocus>
        ...
    </div>
</form>

<script type="text/javascript">

  for(key in json) 
    if(json.hasOwnProperty(key))
      $('input[name='+key+']').val(json[key]);
  

  // JSON
  var json=
    "nameCustomer": "Madmann",
    "surnameCustomer": "Max",
    "room": "32322",
    "telephone": "223231",
    "email": "[e-mail]",
    "website": "www.blabla.com",
    "address": "Main Street 422",
    "sector": "1A"
  ;

  </script>

从本地 JSON 文件填写表格

$(document).ready( function()   
  $.getJSON('data.json',
    function(data)         
        for(key in data) 
          if(data.hasOwnProperty(key))
            $('input[name='+key+']').val(data[key]);
          
    );
  );

从外部 JSON 文件填写表格

$(document).ready( function()   
  $.getJSON('http://www.example.net/data.json',
    function(data)         
        for(key in data) 
          if(data.hasOwnProperty(key))
            $('input[name='+key+']').val(data[key]);
          
    );
  );

【问题讨论】：

您是否在浏览器的控制台中收到任何错误消息？ data.json 到底长什么样，它在哪里？

如果文件中的 json 包含 var json=，则它不是有效的 json，需要删除该部分

data.json 位于本地的 windows 文件夹中。这是一个 XMLHttpRequest-Error：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。 如果我将文件放到网上，那么它可以工作。

我认为你有三个问题需要解决。 1 无错误地获取数据（不在此问题的范围内，2 从 json 构建表单，填充值（或空值）和 3 针对具有更新的特定字段。结构是简单的键值对，输入将是标准输入字段。 1在这里我们解决不了，但是2和3可以。

【参考方案1】：

$(document).ready(function() 
  $.getJSON('folder/data.json',
    function(JSONdata) 
      for (key in JSONdata) 
        if (JSONdata.hasOwnProperty(key))
          $('input[name=' + key + ']').val(JSONdata[key]);
      
    );
);

以及自定义文件data.json（见charlietfl的评论）：

    "nameCustomer": "Madmann",
    "surnameCustomer": "Max",
    "room": "32322",
    "telephone": "223231",
    "email": "[e-mail]",
    "website": "www.blabla.com",
    "address": "Main Street 422",
    "sector": "1A"
;

我认为我在这两者之间遇到了服务器问题，所以还有其他错误。

【讨论】：

我认为是内部服务器问题，禁止加载“外部”文件。这是例如尝试加载 www 时。