2015-02-10 116 views
0

我试图从WordPress站点链接HTML/PHP表单与外部数据库(使用Ruby on Rails构建,我相信)进行通信。我被告知这个数据库有一个完全可用的API。自动填充表单使用HTTP GET从外部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获取请求/调用...?我只是不确定最好的方式是什么让这一切工作,所以如果有人能指出我正确的方向,将不胜感激!

回答

0

我建议你用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 }); 
相关问题