时间戳

首页 > 解决方案 > 用自定义 URL 替换表单操作

javascript - 用自定义 URL 替换表单操作

问题描述

学习 HTML 和 JavaScript，我正在尝试根据通过表单提交的输入为 API 请求形成自定义 URL。我已经能够制作大部分 URL，但在将 URL 字符串连接到“？”之后遇到问题。提交动作时。我仅根据文档和论坛帖子就做到了这一点，但无法弄清楚如何完成此操作，只是想问问某人。

<div id="stock_quote_iex">
    <form id="get_stock_quote_form" onsubmit="get_stock_quote()" method="GET">
        <p>Enter Symbol and API Key</p>
        <input id="symbol" type="text" placeholder="Symbol">
        <input id="api_key" type="text" placeholder="API_KEY">
        <input type="submit" value="Submit">
    </form>
</div>

<script language="javascript" type="text/javascript">
    function get_stock_quote()
    {
        var form = document.getElementById('get_stock_quote_form')
        var symbol = document.getElementById('symbol').value
        var api_key = document.getElementById('api_key').value
        var action_src = "https://sandbox.iexapis.com/stable/stock/" + symbol + "/quote?token=" + api_key

        form.action = action_src;
    }
</script>

示例输入：
符号 = NFLX
API_KEY = pk_s0m3rand0mphra5e

预期输出：
https://sandbox.iexapis.com/stable/stock/NFLX/quote?token=pk_s0m3rand0mphra5e

实际输出：
https://sandbox.iexapis.com/stable/stock/NFLX/quote?

标签： javascripthtmlrest

解决方案

通过从字符串连接中删除查询参数并改用 API_Key 上的 name 属性进行更正。

<div id="stock_quote_iex">
    <form id="get_stock_quote_form" onsubmit="get_stock_quote()" method="GET">
        <p>Enter Symbol and API Key</p>
        <input id="symbol" type="text" placeholder="Symbol">
        <input id="api_key" name="token" type="text" placeholder="API_KEY">
        <input type="submit" value="Submit">
    </form>
</div>

<script language="javascript" type="text/javascript">
    function get_stock_quote()
    {
        var form = document.getElementById('get_stock_quote_form')
        var symbol = document.getElementById('symbol').value
        var action_src = "https://sandbox.iexapis.com/stable/stock/" + symbol + "/quote"

        form.action = action_src;
    }
</script>

推荐阅读