如何将输入数据从html表单发送到外部API？

Question

我正在尝试创建一个使用货币API的货币转换器web应用程序，但是我找不到如何将数据从表单传递到API，并且基于这些数据API返回请求的货币转换。

我尝试将数据从表单传递到api，并将数据传递给如下所示的值：

<div class="jumbotron">
                <h2>Currency Calculator</h2>
                <p class="lead">Convert the currency</p>
                <div class="form-inline">
                    <div class="form-group mb-2">
                        <input type="number" class="form-control" id="amount" min="1" required/>
                    </div>
                    <div class="form-group mx-sm-3 mb-2">
                        <select class="form-control" id="currency-1" required>
                            <option>BGN</option>
                            <option>EUR</option>
                            <option>USD</option>
                            <option>GBP</option>
                        </select>
                    </div>
                    <div class="form-group mx-sm-3 mb-2">
                        <label>convert to</label>
                        <select class="form-control" id="currency-2" required>
                            <option>EUR</option>
                            <option>USD</option>
                            <option>BGN</option>
                            <option>GBP</option>
                        </select>
                    </div>
                    <a target="_blank" button class="btn calculate-btn btn-primary mb-2"
                       href=https://apilayer.net/api/convert?access_key=f369836ea64d991b6264fe9b6e19262a&from=#currency-1&to=#currency-2&amount=#amount&format=1>Show
                        me the result!</a>

我所期望的是将数据从html表单传递给api，但是api返回了以下错误：

{“成功”：假，“错误”：{“代码”：401，“info”：“您输入了一个无效的\”属性。示例:from=EUR}

Answer 1

我还做了以下工作：

<script>
                        $(document).ready(function () {

                            var base_url = "https://apilayer.net/api/convert?access_key=f36e636ea64d851b6264fe9b6e19262a/convert?";

                            var source1 = $("#currency-1").attr("value");
                            var source2 = $("#currency-2").attr("value");
                            var amount = $("#amount").attr("value");

                            var whole_query = base_url + '&from=' + source1 + '&to=' + source2 + '&amount=' + amount;
                            $(".query_exec").attr("href", whole_query);


                            $('#source1').keyup(function () {
                                $('#currency-1').html($(this).val());
                                source1 = $(this).val();

                                whole_query = base_url + '&from=' + source1 + '&to=' + source2 + '&amount=' + amount;
                                $(".query_exec").attr("href", whole_query);

                            });

                            $('#source2').keyup(function () {
                                $('#currency-2').html($(this).val());
                                source2 = $(this).val();

                                whole_query = base_url + '&from=' + source1 + '&to=' + source2 + '&amount=' + amount;
                                $(".query_exec").attr("href", whole_query);

                            });

                            $('#amount').keyup(function () {
                                $('#amount').html($(this).val());
                                amount = $(this).val();

                                whole_query = base_url + '&from=' + source1 + '&to=' + source2 + '&amount=' + amount;
                                $(".query_exec").attr("href", whole_query);


                        });
                    });
                </script>`

Answer 2

您需要将api键传递给返回交换价格的服务的终结点。

下面是nodejs上的示例应用程序web和基于angularjs的客户端构建

客户端：https://github.com/krishna28/exchange-client

服务器api：https://github.com/krishna28/exchangeapi