Javascript 如何使用第三方web api和从上一页的用户输入捕获的数据在页面上创建组件

我已经开始了一个在线的全栈web开发训练营来帮助我学习代码。我选择构建一个车辆历史记录检查作为我的第一个项目，但我在第一个javascript关卡上遇到了一些困难。我想做的是复制一个旅程，用户在页面上输入注册信息，按下“开始检查”按钮，然后在下一个页面上，他们会从第三方API获取有关其车辆的一些高级信息

为了获取数据，我可以访问UKs DVLA API，我需要根据他们的文档发出以下HTTP POST请求来获取数据。我在《邮递员》中这样做了，它会收回数据

curl-L-X POST'https://driver-vehicle-licensing.api.gov.uk/vehicle-enquiry/v1/vehicles“
-H'x-api-key：替换为您的api密钥'
-H'内容类型：应用程序/json'
-d'{“注册号”：“TE57 VRN”}

到目前为止，我的代码如下所示：

输入和按钮的HTML

<div>
<label><input type="text" class="form-control-lg" id="RegNumber" placeholder="ENTER REG" /></label>
</div>
<div>
<button class="btn btn-primary btn-hero" id="submitreg" type="button">Start check</button>
</div>

结果页面上的HTML。我在哪里放置了一个？我想实际放置来自API的数据

<div class="container">
    <div>
        <div class="spec-strip clearfix">
            <div class="spec-strip__inner">
                <div class="header-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="spec-strip__info">
                                        <div class="spec-strip__info__thumb"><img src="/images/car.jpg"></div>
                                        <div class="spec-strip__info__details" data-test="carInfo">
                                            <div class="spec-strip__info__model">***?***</div>
                                            <div class="spec-strip__info__data"><span class="spec-strip__info__data__label">Colour:</span>***?***</div>
                                            <div class="spec-strip__info__data"><span class="spec-strip__info__data__label">Year:</span>***?***</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="spec-strip__plate">
                                        <div class="spec-strip__vrm">***?***</div>
                                        <div class="spec-strip__plate__change text-small">Not the right vehicle? <a href="/"> Search Again <i class="icon-navigateright"></i></a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

***?***
颜色：*****
年份：*****
***?***
不是正确的车辆

我希望上面的话有道理。。。这是我在这里的第一篇帖子，所以不确定我是否包含了足够的信息

---

感谢这个伟大的社区提前

你给我们的代码片段

curl-L-X POST…

是你从终端发出请求的方式（我认为），但它绝对不是Javascript。我不认为从客户端发出此请求是一个好主意，因为您的API密钥可以访问。您需要从客户端向服务器发出请求，然后从那里调用API。

<div class="container">
    <div>
        <div class="spec-strip clearfix">
            <div class="spec-strip__inner">
                <div class="header-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="spec-strip__info">
                                        <div class="spec-strip__info__thumb"><img src="/images/car.jpg"></div>
                                        <div class="spec-strip__info__details" data-test="carInfo">
                                            <div class="spec-strip__info__model">***?***</div>
                                            <div class="spec-strip__info__data"><span class="spec-strip__info__data__label">Colour:</span>***?***</div>
                                            <div class="spec-strip__info__data"><span class="spec-strip__info__data__label">Year:</span>***?***</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="spec-strip__plate">
                                        <div class="spec-strip__vrm">***?***</div>
                                        <div class="spec-strip__plate__change text-small">Not the right vehicle? <a href="/"> Search Again <i class="icon-navigateright"></i></a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>