如何通过单击按钮将 html 表单数据发送到另一个 Web 服务器答案

【问题标题】：How to send html form data to another web server via a button click如何通过单击按钮将 html 表单数据发送到另一个 Web 服务器
【发布时间】：2020-09-14 21:30:10
【问题描述】：

我有两台网络服务器。一个运行我的前端 (example.com)，一个运行我的后端 (api.example.com)。

在我的前端 (example.com) 我有这个代码，它是一个简单的 html 网站，它有一个表单、一个输入字段和一个按钮。当我单击按钮时，我想获取该数据并将其发送到后端（api.example.com）。例如，我在前端的用户名字段中输入“nathan”，然后单击按钮。我希望它发送给我 api.example.com/sendcode?username=nathan

我目前有这个代码，但按钮让我在同一个网站上，而不是对一个完全不同的网址进行操作：

<form class="login100-form validate-form flex-sb flex-w" action="api.example.com" method="POST">
                <span class="login100-form-title p-b-51">
                    Request for a code
                </span>


                <div class="wrap-input100 validate-input m-b-16" data-validate = "Username is required">
                    <input class="input100" type="text" name="username" placeholder="Username">
                    <span class="focus-input100"></span>
                </div>


                <div class="container-login100-form-btn m-t-17">
                    <button class="login100-form-btn">
                        Send code
                    </button>
                </div>

                <div class="flex-sb-m w-full p-t-3 p-b-24">
                    <div class="contact100-form-checkbox">
                    </div>
                </div>
            </form>

使用此代码，它会将我发送到 'example.com/api.example.com?username=nathan' 我该如何解决这个问题，希望两者完全不同？

【问题讨论】：

标签： html node.js frontend

【解决方案1】：

您需要一个带有协议的完全限定 URL - 最好是 https，如 action="https://api.example.com/sendcode"

请搜索 AJAX 和您的服务器进程。或者使用fetch

const username = document.querySelector("[name= username]").value;
fetch('https://api.example.com/sendcode?username='+encodeURIComponent(username))
  .then(response => response.json())
  .then(data => console.log(data));

要使用Ajax，你需要抓取提交事件

这里我使用 jQuery 来加快编码速度，只需在页面中包含 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 即可使用它

$(".login100-form").on("submit", function(e) {
  e.preventDefault(); // stop submit
  $.post('https://api.example.com/sendcode', 
    { data : $(this).serialize() }, // the form content in key=value format
    function(response) {
      console.log(response)
    })  
})

【讨论】：

AJAX 会与 html 并驾齐驱吗？
谢谢，我宁愿投入更多的工作来包含更多的技术，让一切都“正常工作”，而不是仅仅使用快速修复。
@Nathan 看看。我在这里使用 jQuery，因为它为您完成了所有繁重的工作
谢谢，我会看看，我想我在 JS 脚本和 AJAX 中使用了一个函数，但我发现很难从表单中获取数据
我更新了如何从字段中获取用户名

【解决方案2】：

更改您的表单操作以包含 http:// 例如

<form class="login100-form validate-form flex-sb flex-w" action="http://api.example.com" method="POST">

【讨论】：

虽然这确实将我发送到域“api.example.com”，但它不包括表单内输入字段中的参数？
如果您希望它以api.example.com?username=nathan 发送，那么您需要将方法从 POST 更改为 GET

【解决方案3】：

根据场景可能有多种方法，但最简单的可能会在查询字符串中公开数据的方法是通过简单的 javascript 方法在单击按钮时发送发布请求。

【讨论】：