Jquery 通用方向rails外部API

我正在开发一个使用Edmunds外部API的rails应用程序

在主页上，我试图创建一个动态选择下拉框。下面是事件的顺序

1） 在主页加载中，选择下拉列表填充所有新车品牌（丰田、本田等）

2） 当用户选择特定的汽车品牌时，会出现第二个选择下拉列表，其中列出了特定于该品牌的所有车型。（凯美瑞、雅阁等）

3） 同样的顺序也适用于汽车的特定装饰和风格。最终的结果是一款特殊的汽车（丰田凯美瑞LE2DR）

4） 用户单击“提交”按钮，汽车的属性将保存到具有相同相应属性的汽车模型中

我正在寻找一个最好的方式去做这个高层次的概述

目前，我的动态选择框行为工作正常。问题是，这都是Jquery，每次选择一个新make时都会进行AJAX调用

$.ajax({
  type: "GET",
  url: "http://api.edmunds.com/api/vehicle/v2/makes?fmt=json&state=new&api_key=" + edmunds_api_key,
  dataType: "jsonp",
  success: function(data) {
    var makeArray = data.makes;
    console.log(data.makes);
    $.each(makeArray, function(index, value) {
      $('#make_id').append('<option value="' + value.name + '">' + value.name + '</option>');
    });
  }
});

$(document).on('change', '#make_id', function() {
  retrieve_model(this.value);
});

function retrieve_model(make) {
  $.get('https://api.edmunds.com/api/vehicle/v2/' + make + '/models?  fmt=json&api_key=' + edmunds_api_key, function(data) {
    var modelArray = data.models;
    console.log(data.models);
    $('#model_id').empty();
    $.each(modelArray, function(index, value) {
      $('#model_id').append('<option>' + value.name + '</option>');
    });
  });
}

$.ajax({
键入：“获取”，
url:“http://api.edmunds.com/api/vehicle/v2/makes?fmt=json&state=new&api_key=“+edmunds_api_键，
数据类型：“jsonp”，
成功：功能（数据）{
var makeArray=data.makes；
console.log（data.make）；
$.each（生成数组、函数（索引、值）{
$（“#make_id”）.append（“”+value.name+“”）；
});
}
});
$（文档）.on（'change'，'make#u id'，function（）{
检索_模型（this.value）；
});
函数检索\u模型（make）{
$.get（'https://api.edmunds.com/api/vehicle/v2/“+make+”/models？fmt=json&api_key='+edmunds_api_key，函数（数据）{
var modelArray=data.models；
console.log（data.models）；
$（'#model_id'）.empty（）；
$.each（模型数组、函数（索引、值）{
$（'#model_id'）。追加（''+value.name+''）；
});
});
}

我知道有一个更好的方法可以做到这一点。我只是不知道如何实现，或者在实现这种应用程序时，最佳实践是什么

寻找关于如何进行所述项目的一般指导

在主页加载时，我可以打一个电话，然后在整个过程中使用该数据吗？而不是打多个不必要的电话

我确实找到了很多以前关于这个话题的帖子。例如

---

大多数都是我无法理解的，或者是旧版本的Rails。有什么建议吗？

我会检查您的API许可证并计算预期的流量-它们可能会将您限制在x个连接/秒/小时。如果你能在这些限制范围内生活，我看不出有任何理由不使用API。您可以设置一些常识缓存以防止不必要的调用（未经测试）：

$（document）.on（'change'，'make#id'，function（）{
writeModels（检索_模型（this.value））；
});
var modelCache={}；
函数检索\u模型（make）{
if（modelCache[make]）{
返回modelCache[make]；//返回缓存的值
}
$.get（'https://api.edmunds.com/api/vehicle/v2/“+make+”/models？fmt=json&api_key=”+edmunds_api_key，{
context:this，//需要确保完整回调中的“make”是正确的
完成：功能（数据）{
var modelArray=data.models；
console.log（data.models）；
modelCache[make]=data.models；//填充缓存
}
});
}
函数writeModels（modelArray）{
$（'#model_id'）.empty（）；
$.each（模型数组、函数（索引、值）{
$（'#model_id'）。追加（''+value.name+''）；
});
}

你能更清楚地说明你的目标吗？你是否试图避免对Edumnds API的点击？你想让它更快吗？如果速度慢，哪一部分慢？如果您查看edmunds.com网站，每次用户选择模型时，他们都会发出AJAX请求，但他们会在浏览器上缓存响应，因此第二次请求同一模型时，返回数据的速度会快一些。我希望“选择”下拉列表能够动态生成并将结果保存到数据库中。我是新手，不确定向外部API发出这么多请求是否合适。我的全部Jquery解决方案是可以接受的，还是包含rails控制器/模型的解决方案更好？

$(document).on('change', '#make_id', function() {
  writeModels(retrieve_model(this.value));
});

var modelCache = {};

function retrieve_model(make) {
  if (modelCache[make]) {
    return modelCache[make]; //return cached value
  }
  $.get('https://api.edmunds.com/api/vehicle/v2/' + make + '/models?  fmt=json&api_key=' + edmunds_api_key, { 
    context: this,  //needed to ensure "make" is correct in the complete callback
    complete: function(data) {
      var modelArray = data.models;
      console.log(data.models);
      modelCache[make] = data.models; //populate cache
    }
  });
}

function writeModels(modelArray) {
  $('#model_id').empty();
  $.each(modelArray, function(index, value) {
    $('#model_id').append('<option>' + value.name + '</option>');
  });
}