使用 HTTP GET 从外部 API 自动填写表单选择字段答案

【问题标题】：Auto-fill Form Select Fields from External API using HTTP GET使用 HTTP GET 从外部 API 自动填写表单选择字段
【发布时间】：2015-02-10 05:19:01
【问题描述】：

我正在尝试从 WordPress 站点链接 HTML/PHP 表单以与外部数据库（我相信它是使用 Ruby on Rails 构建的）进行通信。有人告诉我这个数据库有一个完整的 API。

完整的表单还有一些其他标准文本字段等，但为了提供基本概述，用户将在下面的“make_field”中选择汽车品牌。然后，这将与数据库的 API 通信以填写下一个选择“inquest_model”的选项（然后基于此，将有另一个调用填充“inquest_year”字段）。

<form accept-charset="UTF-8" action="http://runbikestop.com/inquests" class="new_inquest" id="new_inquest" method="post">

      <div class="field" id="make_field">
         <label for="inquest_make">Make <span class="please-wait">please wait</span></label>
         <select id="inquest_make" name="inquest[make]"><option value="">Please select</option>
           <option value="ABARTH">ABARTH</option>
           <option value="ALFA ROMEO">ALFA ROMEO</option>
           <option value="AUDI">AUDI</option>
           <!--(there are 100 or so more options here...)-->
        </select>
       </div>

       <div class="field">
         <label for="inquest_make">Model <span class="please-wait">please wait</span></label>
         <select id="inquest_model" name="inquest[model]">
           <option> </option>
         </select>
       </div>

       <div class="field" id="year_field">
          <label for="inquest_make">Year <span class="please-wait">please wait</span></label>
          <select id="inquest_year" name="inquest[year]">
           <option> </option>
         </select>
       </div>

        <input id="inquest_gclid_code" name="inquest[gclid_code]" type="hidden" />
        <input id="inquest_webpage_url" name="inquest[webpage_url]" type="hidden" />

       <div class="actions">
         <input name="commit" type="submit" value="Submit" />
       </div>
</form>

构建数据库的 ruby 开发人员告诉我，以下是需要进行的命令行测试查询类型才能使动态下拉菜单起作用：

curl -i -H "Accept: application/json"  http://runbikestop.com/api/v1/cars/models?makes=ALFA+ROMEO 
curl -i -H "Accept: application/json" "http://runbikestop.com/api/v1/cars/car_years?makes=ALFA+ROMEO&models=156"

另一位开发人员建议不要使用 javascript API 调用，而是建议使用 HTTP 获取请求/调用...？我只是不确定让这一切正常工作的最佳方法是什么，所以如果有人能指出我正确的方向，我将不胜感激！

【问题讨论】：

标签： php ruby-on-rails wordpress forms get

【解决方案1】：

我建议您使用 Javascript 来应对这一挑战。我不确定您在前端代码中使用了哪些库，但使用 jQuery AJAX 工具可以帮助您轻松使用 ROR API。

制作一个小型“包装器”或 SDK 来与 API 通信，这样您就可以将应用程序逻辑与从 API 获取数据所需的接口分离。

window.API = window.API || {};

API.getModels = function(models) {
  var url = "http://runbikestop.com/api/v1/cars/models?callback=?";
  return $.getJSON( "url", models );
};

此 SDK 将帮助您以非常实用且可维护的方式获取 API 数据，例如：

var models = { makes : ["ALFA ROMEO", "NISSAN"] };
API.getModels(models).done(function(modelsJSON) { // handle the API JSON here });

【讨论】：