如何从 POST 请求附加到 HTML 表单 URL

Question

我想获取 HTML 表单的字段之一并使用它来修改操作的 URL。我关注了这个问题，它显示了它是如何为 GET 请求完成的，但是我在修改 POST 请求的技术时遇到了麻烦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>User location lookup</title>
    </head>

    <body>
        <!-- method: /sf/ask/826824771/ -->

        <script>
            function process()
            {
                var url="http://localhost:43/" + document.getElementById("url").value;
                location.href=url;
                return false;
            }
        </script>

        <form onSubmit="return process();" method="get">
            Username: <input type="text" name="url" id="url"></input>
            <input type="submit" value="go"></input>
        </form>

        <script>
            function process2()
            {
                var url="http://localhost:43/" + document.getElementById("url").value;
                location.href=url;
                return false;
            }
        </script>

        <form method="post"  onSubmit="return process2();">
            Username: <input type="text" name="url" id="url"> </input>
            Location: <input type="text" name="location" id="location"> </input>
            <input type="submit" value="go"></input>
        </form>
    </body>
</html>

GET 请求正确发送：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>User location lookup</title>
    </head>

    <body>
        <!-- method: https://stackoverflow.com/questions/11811782/form-value-creates-a-url -->

        <script>
            function process()
            {
                var url="http://localhost:43/" + document.getElementById("url").value;
                location.href=url;
                return false;
            }
        </script>

        <form onSubmit="return process();" method="get">
            Username: <input type="text" name="url" id="url"></input>
            <input type="submit" value="go"></input>
        </form>

        <script>
            function process2()
            {
                var url="http://localhost:43/" + document.getElementById("url").value;
                location.href=url;
                return false;
            }
        </script>

        <form method="post"  onSubmit="return process2();">
            Username: <input type="text" name="url" id="url"> </input>
            Location: <input type="text" name="location" id="location"> </input>
            <input type="submit" value="go"></input>
        </form>
    </body>
</html>

而对于 POST 我得到：

GET /brian HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Accept-Language: en-GB
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: localhost:43
DNT: 1
Connection: Keep-Alive

即使方法是POST.

我想生成的是：

GET /brian HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Accept-Language: en-GB
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: localhost:43
DNT: 1
Connection: Keep-Alive

有人能用尽可能少的 JavaScript 代码指出正确的方向吗？

Answer 1

您的代码未提交表单。它实际上是通过GET直接调用 URL ，即：此方法仅适用于 GET。

请尝试：

<form id="myformid" method="post">
    Username: <input type="text" name="url" id="url2" onChange="updateAction()"> </input>
    Location: <input type="text" name="location" id="location"> </input>
    <input id="mysubmit" type="submit" value="go"></input>
</form>

<script>
    function updateAction() {
        var url = document.getElementById("url2").value;
        document.getElementById("myformid").setAttribute("action", "http://localhost:43/" + url);
    }
</script>