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

{“成功”：false，“错误”：{“代码”：401，“信息”：“您输入了无效的“来自”属性。 [示例：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 api和在angularjs上构建的客户端

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

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

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

2 个答案: