如何加载外部JSON文件？注意：外部文件可能受服务器设置限制

先给大家准备好通用的HTML表单结构，下面三种填充方式都会基于这个表单来实现：

<form id="datas-from-json">
  <div class="form-group">
    <label class="form-control">Name:</label>
    <input name="nameCustomer" class="form-control" type="text" autofocus>
    <!-- 其他表单字段省略，注意字段的`name`属性要和JSON的key一一对应 -->
  </div>
</form>

接下来分享三种填充方案，同时也会说明加载外部JSON时可能遇到的拦截问题：

1. 用本地JSON对象直接填充表单 #

这种方式完全不需要加载外部文件，直接在脚本里定义JSON数据，适合快速测试或者静态数据场景：

// 定义本地JSON数据
var json = {
  "nameCustomer": "Madmann",
  "surnameCustomer": "Max",
  "room": "32322",
  "telephone": "223231",
  "email": "info@blabla.com",
  "website": "www.blabla.com",
  "address": "Main Street 422",
  "sector": "1A"
};

// 遍历JSON数据填充对应表单字段
for(key in json) {
  if(json.hasOwnProperty(key)) $('input[name='+key+']').val(json[key]);
}

2. 用本地JSON文件填充表单 #

如果你的JSON数据存在本地文件（比如data.json）里，可以用jQuery的getJSON方法加载。这里要注意两点：一是文件路径要正确，二是必须在服务器环境下运行（不能直接双击打开HTML文件，否则浏览器会限制本地文件访问）：

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

data.json的内容就是上面定义的JSON对象即可。

3. 用外部JSON文件填充表单 #

加载外部域名下的JSON文件时，最容易遇到服务器拦截问题——这是浏览器同源策略的限制：如果外部服务器没有配置CORS（跨域资源共享）响应头，浏览器会直接拦截请求，导致无法获取数据。如果对方服务器已经开启CORS，就可以用下面的代码：

$(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]);
    }
  });
});

如果遇到拦截问题，你可以联系外部服务器管理员开启CORS，或者通过自己的后端服务器做代理转发请求（这样就不会触发跨域限制了）。

内容的提问来源于stack exchange，提问作者Kiwi