时间戳

首页 > 解决方案 > 如何在本地测试通过 Javascript 发送表单数据？

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

问题描述

我正在学习通过手动构建 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>

标签： javascripthtmlformsxmlhttprequest

解决方案

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

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

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

推荐阅读