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

我正在尝试创建一个使用货币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>

货币计算器
转换货币
BGN
欧元
美元
英镑
皈依
欧元
美元
BGN
英镑

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

{“success”：false，“error”：{“code”：401，“info”：“您输入了 无效的\“from\”属性。[示例：from=EUR]“}}

---

我还做了以下工作：

<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>`

$（文档）.ready（函数（）{
var base_url=”https://apilayer.net/api/convert?access_key=f36e636ea64d851b6264fe9b6e19262a/convert?";
var source1=$（“货币-1”）.attr（“价值”）；
var source2=$（“货币-2”）.attr（“价值”）；
风险值金额=$（“#金额”）.attr（“价值”）；
var-whole_query=base_url+'&from='+source1+'&to='+source2+'&amount='+amount；
$（“.query\u exec”）.attr（“href”，整个查询）；
$（'#source1'）.keyup（函数（）{
$（'#currency-1'）.html（$（this.val（））；
source1=$（this.val（）；
整个查询=base\u url+'&from='+source1+'&to='+source2+'&amount='+amount；
$（“.query\u exec”）.attr（“href”，整个查询）；
});
$（'#source2'）.keyup（函数（）{
$（'#currency-2'）.html（$（this.val（））；
source2=$（this.val（）；
整个查询=base\u url+'&from='+source1+'&to='+source2+'&amount='+amount；
$（“.query\u exec”）.attr（“href”，整个查询）；
});
$（“#金额”）.keyup（函数（）{
$（'#amount'）.html（$（this.val（））；
金额=$（this.val（）；
整个查询=base\u url+'&from='+source1+'&to='+source2+'&amount='+amount；
$（“.query\u exec”）.attr（“href”，整个查询）；
});
});
`

我还做了以下工作：

<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>`

$（文档）.ready（函数（）{
var base_url=”https://apilayer.net/api/convert?access_key=f36e636ea64d851b6264fe9b6e19262a/convert?";
var source1=$（“货币-1”）.attr（“价值”）；
var source2=$（“货币-2”）.attr（“价值”）；
风险值金额=$（“#金额”）.attr（“价值”）；
var-whole_query=base_url+'&from='+source1+'&to='+source2+'&amount='+amount；
$（“.query\u exec”）.attr（“href”，整个查询）；
$（'#source1'）.keyup（函数（）{
$（'#currency-1'）.html（$（this.val（））；
source1=$（this.val（）；
整个查询=base\u url+'&from='+source1+'&to='+source2+'&amount='+amount；
$（“.query\u exec”）.attr（“href”，整个查询）；
});
$（'#source2'）.keyup（函数（）{
$（'#currency-2'）.html（$（this.val（））；
source2=$（this.val（）；
整个查询=base\u url+'&from='+source1+'&to='+source2+'&amount='+amount；
$（“.query\u exec”）.attr（“href”，整个查询）；
});
$（“#金额”）.keyup（函数（）{
$（'#amount'）.html（$（this.val（））；
金额=$（this.val（）；
整个查询=base\u url+'&from='+source1+'&to='+source2+'&amount='+amount；
$（“.query\u exec”）.attr（“href”，整个查询）；
});
});
`

您需要将api密钥传递到返回交换价格的服务的端点

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

客户：

---

服务器api:

您需要将api密钥传递到返回交换价格的服务的端点

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

客户：

服务器api：