Question

所以我知道，当您在HTML表单的操作中放置URL时，它会将用户发送到该URL。我还添加了目标属性target="_blank"以在新窗口中打开新URL。但我想关闭该窗口并留在提交表单的原始网站上。我尝试通过命名目标窗口并关闭它来做到这一点，但这没有成功。我想知道是否有一种简单的方法可以做到这一点。

<form name="leds" id="ledSend" method="get" target="newWindow" action="https://agent.electricimp.com/NkzPvVKeHshT">
Lamp Control: <input type="radio" name="led" value="0" checked>Off
              <input type="radio" name="led" value="1">On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10">seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here"><br>
<input type="submit" value="Update!" onclick="alert(theInput.value +', You are about to change the Light! Keep in mind that there will be about a 2 second delay on the LiveStream.')"/>
<script>
var theInput = document.getElementById("name");
</script>
</form>

<script>
newWindow.close();
</script>

Answer 1

另一个解决方案，除了ajax之外，显而易见的是使用内部隐藏的iframe作为表单元素的target属性。这样，表单将在隐藏的内部元素中打开。 e.g：

<form id="eFrm" target="ifrm1">
</form>
<iframe id="ifrm1" name="ifrm1" style="display:none"></iframe>

Answer 2

这就是你需要的东西，只需根据你的需要进行调整，创建一个在动作中调用的php文件，然后让它按照你的表单进行操作 - 完全相同的方式，但保持在同一页面上：

$("#ajaxform").submit(function(e)
    {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax(
        {
            url : formURL,
            type: "POST",
            data : postData,
            success:function(data) 
            {
                //data: return data from server
            }

        });
        e.preventDefault(); //STOP default action
        e.unbind(); //unbind. to stop multiple form submit.
    });

    $("#ajaxform").submit();

您需要在文件中包含jQuery才能使用它！

当您在表单中使用GET时 - 通过此提交，您将获得$ _POST中的数据。

Answer 3

宝宝建议的AJAX请求是要走的路，但它有一个警告。如果目标服务器位于不同的域上，浏览器将不允许传递您的AJAX请求。要解决这个问题，它应该提供正确的CORS headers。

如果目标服务器不受控制，您可以在自己的服务器上创建代理并调用它而不是当前的第三方服务器。这样，您可以通过将代理设置在与包含表单的页面相同的地址来进一步简化操作。

在不打开新窗口的情况下提交HTML表单

3 个答案: