如何在本地测试通过 Javascript 发送表单数据？答案

【问题标题】：How to test sending form data through Javascript locally?如何在本地测试通过 Javascript 发送表单数据？
【发布时间】：2020-07-21 01:10:22
【问题描述】：

我正在通过手动构建 XMLHttpRequest 来学习如何通过 JavaScript 发送表单。在给定示例的末尾，有一条注释：

注意：如果您想向第三方网站发送数据，则 XMLHttpRequest 的这种使用受同源策略的约束。对于跨域请求，您需要 CORS 和 HTTP 访问控制。

不过，我想在本地测试该示例。我可以更改什么以使其在本地工作？投稿地址？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button>Click me!</button>

    <script>
        function sendData(data) {
            console.log('Sending data');

            const XHR = new XMLHttpRequest();
            let urlEncodedData = "",
                urlEncodedDataPairs = [],
                name;

            for (name in data) {
                urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
            }

            urlEncodedData = urlEncodedDataPairs.join('&').replace('/%20/g', '+');

            XHR.addEventListener('load', function (event) {
                alert('Yeah! Data sent and response loaded.');
            });

            XHR.addEventListener('error', function (event) {
                alert('Oops! Something went wrong.');
            });

            XHR.open('POST', 'https://example.com/cors.php');
            XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            XHR.send(urlEncodedData);
        }

        const btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            sendData({ test: 'ok' });
        })
    </script>
</body>

</html>

【问题讨论】：

"我可以改变什么让它在本地工作？发帖请求的地址？" — 是的……你必须这样做，因为示例行不通！
那我应该使用哪个地址？
您为处理数据而编写的服务器端代码的地址。
这只是我正在学习的例子，所以我没有这样的真实代码
@bb8 您可以愉快地使用XMLHttpRequest，而无需在本地运行后端服务器。我假设您正在学习 Web 开发并且对这些东西不是很满意。您只需将 URL 更改为免费的、公开可用的 API，您的网络请求就可以正常工作——当然，在一定程度上。

标签： javascript html forms xmlhttprequest

【解决方案1】：

您可以使用虚假的 REST API 服务，例如 https://reqres.in。基本使用免费，无需注册。

他们通常会发回虚假数据，并且不需要 CORS。

例如，您只需将 URL 更改为 https://reqres.in/api/users。

【讨论】：

是的，我只是在学习，还没有进入服务器端部分。我使用了这个网址，它显示了他们提供的信息。如果我希望我的消息（警报）起作用，我需要做什么？
如果您的点击处理程序运行，警报应该正确显示。我直接测试了你的 sendData 函数，它对我有用，会显示警报。
你让'load'处理程序工作了吗？我不能
它可以在我的机器上运行，无需修改，在 Chrome 83 下。也许你不小心改变了一些东西。控制台中是否有错误输出？您是否保存了文件并刷新了浏览器？
我在警报消息中得到 '{"id":"557","createdAt":"2020-07-20T18:50:12.618Z"}'，但我希望得到我提供的留言