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

【问题标题】：How to send input data from an html form to an external API?如何将输入数据从 html 表单发送到外部 API？
【发布时间】：2019-12-30 00:10:38
【问题描述】：

我正在尝试创建一个使用货币 API 的货币转换器网络应用程序，但我找不到如何将数据从表单传递到 API 以及基于该数据的 API 返回请求的货币转换。

我尝试将表单中的数据传递到 api 的 from、to 和 amount 值，如下所示：

<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 返回了以下错误：

{"success":false,"error":{"code":401,"info":"您输入了一个无效的 \"from\" 属性。 [示例：来自=EUR]"}}

【问题讨论】：

标签： html api http-post http-get

【解决方案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>`

【讨论】：

【解决方案2】：

您需要将api密钥传递给返回兑换价格的服务的端点。

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

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

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

【讨论】：