使用 HTTP GET 从外部 API 自动填写表单 Select 字段

Question

我正在尝试 link 从 WordPress 站点创建一个 HTML/PHP 表单以与外部数据库（使用 Ruby 在 Rails I 上构建）进行通信相信）。有人告诉我这个数据库有一个完整的工作 API.

完整表格还有一些其他标准文本字段等，但为了提供基本概览，用户会在下面的 'make_field' 中 select 汽车品牌。然后这将与数据库的 API 通信以填写下一个 select '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 get requests/calls...？我只是不确定让这一切正常工作的最佳方法是什么，所以如果有人能指出我正确的方向，我将不胜感激！

Answer 1

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

制作一个小型 "wrapper" 或 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 });

使用 HTTP GET 从外部 API 自动填写表单 Select 字段

Auto-fill Form Select Fields from External API using HTTP GET

php

forms

wordpress

get

ruby-on-rails