如何用JavaScript替代HTML表单向在线编译器POST数据并打开新标签

因为浏览器的跨域限制，XMLHttpRequest没法直接给jDoodle发POST请求，但可以用动态创建隐藏表单并自动提交的方式绕开——既不用在页面上显式写表单，又能利用表单提交的原生特性实现跳转传参：

<pre><code class="language-lua">
print("hello jdoodle")
</code></pre>
<a href="#" onclick="runOnJDoodle(this); return false;">在jDoodle运行</a>

<script>
function runOnJDoodle(caller) {
    // 拿到代码块里的代码
    const codeEl = caller.previousElementSibling.querySelector("code");
    const code = codeEl.innerText.trim();

    // 动态建一个隐藏的表单
    const form = document.createElement("form");
    form.method = "POST";
    form.action = "https://www.jdoodle.com/api/redirect-to-post/execute-lua-online/";
    form.target = "_blank";
    form.style.display = "none";

    // 加代码输入框
    const textarea = document.createElement("textarea");
    textarea.name = "initScript";
    textarea.value = code;
    form.appendChild(textarea);

    // 加提交按钮（部分服务需要这个参数才会处理请求）
    const submitBtn = document.createElement("input");
    submitBtn.type = "submit";
    submitBtn.value = "Run";
    form.appendChild(submitBtn);

    // 把表单塞到页面里提交
    document.body.appendChild(form);
    form.submit();

    // 提交完删掉表单，清理DOM
    setTimeout(() => document.body.removeChild(form), 100);
}
</script>

之前代码失效的原因 #

1. 跨域限制：浏览器不允许前端脚本跨域发XMLHttpRequest，但表单提交是浏览器原生行为，不受这个限制
2. FormData序列化问题：JSON.stringify(FD)没法正确序列化FormData对象，所以alert显示为空——要查看FormData内容得用for...of循环遍历
3. 请求与新标签分离：window.open开的新标签和后面的XMLHttpRequest是完全独立的，没法把请求数据传到新标签里

内容的提问来源于stack exchange，提问作者DiegoJArg