Edmunds自动API输出值Wordpress

Question

我一直试图让Edmunds Auto API在Wordpress中运行一段时间。这个网站的片段是我能够获得的一组简单的下拉选项，可以让你选择一个年份，品牌，模型，汽车的风格（我用下面的代码做了）。

http://wordpress-code-snippets.blogspot.com/2014/05/edmunds-vehicle-api-with-jquery.html

输入数据后，我希望它重定向到另一个页面（操作页面），其中数据可用于从API调用True Market Value（TMV），它将显示在屏幕上。

我还需要使用Edmunds API通过电子邮件向访客发送汽车价值的快照。我希望弄清楚如何将其与重力形式相结合，除其他外（跟踪）。

解决在下一页输出值的问题是我目前的主要问题，所以这个问题只关注这个问题。

我无法在文档中找到可行的解决方案。我知道它必须与真实市场价值（TMV）有关。

http://developer.edmunds.com/faq.html

为了将Edmunds Auto API的常规数据提取到html选择中，此代码非常有效。它只是需要能够以某种方式输出值。在Wordpress中，我不得不在页脚中添加脚本。这是我能让它发挥作用的唯一方法。

<!--Form Details to display year/make/model in dropdown -->

<form method="POST" action="one123.php">
       <select id="ajYears" name="ajYears">
        </select>
         <select id="ajMakes" name="makes" disabled="disabled">
            <option>Select Make</option>
        </select>
        <select id="ajModels" name="models" disabled="disabled">
            <option>Select Model</option>
        </select>
        <select id="ajStyles" name="styles" disabled="disabled">
            <option>Select Trim</option>
        </select>
        <input type="submit" value="submit">
</form>

<!--Script to fetch details from API-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    jQuery.noConflict();
</script>

<!-- js code -->
<script>
    var protoCall = "https://";
    var host = "api.edmunds.com";

        // Make sure to change the API KEY
    var apiKey = "API KEY";
    var fmt = "json";
    var standardParams = "&fmt=" + fmt +  "&api_key=" + apiKey + "&callback=?";
    var $yearSelect = jQuery('#ajYears');
    var $makeSelect = jQuery('#ajMakes');
    var $modelSelect = jQuery('#ajModels');
    var $styleSelect = jQuery('#ajStyles');

    // lets bind some events on document.ready.
    jQuery(function(){

        $yearSelect.on('change', function() { getMakeModelsByYear()});
        $makeSelect.on('change', function() { enableModelDropdown() });
        $modelSelect.on('change', function() { getStyles() });

        // lets build the year drop down.
        ajEdmundsBuildYear();

    });

    // method to build the year drop down.
    function ajEdmundsBuildYear()
    {
        var baseYear = 1990,
            endYear = new Date().getFullYear();
        $yearSelect.empty();
        $yearSelect.append('<option value="-1">Select Year</option>');
        for(var yyyy=baseYear; yyyy<=endYear; yyyy++)
        {
            $yearSelect.append('<option value="' + yyyy + '">' + yyyy +'</option>');   
        }
    }

    // get the makes and models for a year in one go...
    function getMakeModelsByYear()
    {
        var year = $yearSelect.val(),
            endPoint = "/api/vehicle/v2/makes",
            view = "basic",
            options = "year=" + year + "&view=" + view + standardParams,
            postURL = protoCall + host + endPoint + "?" + options;
        jQuery.getJSON(postURL,
            function(data) {
                 // clear the make drop down... re add the first option... remove dsiabled attr.
                 $makeSelect.empty();
                 $makeSelect.append('<option value="-1">Select Make</option>');
                 $makeSelect.removeAttr('disabled');
                 $modelSelect.empty();
                 $modelSelect.append('<option value="-1">Select Model</option>');

                 // loop the makes... each make contains model... add the make in make drop down and models in model dd
                 jQuery.each(data.makes, function(i, val) {
                      make = data.makes[i];
                      $makeSelect.append('<option value="' + make.niceName + '">' + make.name + '</option>');
                      jQuery.each(make.models, function(x, val){   
                           model = make.models[x];
                           $modelSelect.append('<option make="' + make.niceName +'" value="' + model.niceName + '">' + model.name + '</option>');                 
                      });
                 });
            });
    }

    // since we already grabed the models...
    // now just matter of showing only the matching models for a make.
    function enableModelDropdown()
    {
        var make =  $makeSelect.val();
        $modelSelect.removeAttr('disabled');
        $modelSelect.find('option').not('[value="-1"]').hide();
        $modelSelect.find('option[make=' + make + ']').show();

    }

    // grab the styles... pretty much same as
    // getMakeModelsByYear()
    function getStyles()
    {
        var year = $yearSelect.val(),
            make = $makeSelect.val(),
            model = $modelSelect.val(),
            endPoint = "/api/vehicle/v2/" + make + "/" + model + "/" + year + "/styles",
            view = "basic",
            options = "view=" + view + standardParams,
            postURL = protoCall + host + endPoint + "?" +  options;
        jQuery.getJSON(postURL,
            function(data) {
                 $styleSelect.empty();
                 $styleSelect.removeAttr('disabled');
                 $styleSelect.append('<option value="-1">Select Style</option>');
                 jQuery.each(data.styles, function(i, val) {
                      style = data.styles[i];
                      $styleSelect.append("<option value='" + style.id + "'>" + style.name + "</option>");
                 });
            });
    }
</script>