使用 JavaScript 发送表单

您所在的位置：网站首页 › 网页提交表单什么意思 › 使用 JavaScript 发送表单

使用 JavaScript 发送表单

2024-07-11 05:29| 来源: 网络整理| 查看: 265

如果你使用一个含有组件的 FormData 表单对象，数据会被自动处理。但是要手动发送二进制数据的话，还有额外的工作要做。

在现代网络上，二进制数据有很多来源：例如 FileReader、Canvas、WebRTC，等等。不幸的是，一些过时的浏览器无法访问二进制数据，或是需要非常复杂的工作环境。这些遗留问题已经超出了本文的涵盖范围。如果你想了解更多关于 FileReader API 的知识，参见如何在 web 应用程序中使用文件。

发送二进制数据最简单的方法是使用 FormData 的 append() 方法，如上图所示。如果必须手工操作，就比较麻烦了。

在下面的例子中，我们使用了FileReader API 来访问二进制数据，然后手动构建多部分表单数据请求：

html 文本数据：文件数据：提交！

如你所见，这个 HTML 只是一个标准的，没有什么神奇的事情。“魔法”都在 JavaScript 里：

js// 因为我们想获取 DOM 节点， // 我们在页面加载时初始化我们的脚本。 window.addEventListener("load", () => { // 这些变量用于存储表单数据 const text = document.getElementById("theText"); const file = { dom: document.getElementById("theFile"), binary: null, }; // 使用 FileReader API 获取文件内容 const reader = new FileReader(); // 因为 FileReader 是异步的，会在完成读取文件时存储结果 reader.addEventListener("load", () => { file.binary = reader.result; }); // 页面加载时，如果一个文件已经被选择，那么读取该文件。 if (file.dom.files[0]) { reader.readAsBinaryString(file.dom.files[0]); } // 如果没有被选择，一旦用户选择了它，就读取文件。 file.dom.addEventListener("change", () => { if (reader.readyState === FileReader.LOADING) { reader.abort(); } reader.readAsBinaryString(file.dom.files[0]); }); // 发送数据是我们需要的主要功能 function sendData() { // 如果存在被选择的文件，等待它读取完成 // 如果没有，延迟函数的执行 if (!file.binary && file.dom.files.length > 0) { setTimeout(sendData, 10); return; } // 要构建我们的多部分表单数据请求， // 我们需要一个 XMLHttpRequest 实例 const XHR = new XMLHttpRequest(); // 我们需要一个分隔符来定义请求的每一部分。 const boundary = "blob"; // 将我们的主体请求存储于一个字符串中 let data = ""; // 所以，如果用户已经选择了一个文件 if (file.dom.files[0]) { // 在请求体中开始新的一部分 data += `--${boundary}\r\n`; // 把它描述成表单数据 data += "content-disposition: form-data; " + // 定义表单数据的名称 `name="${file.dom.name}"; ` + // 提供文件的真实名字 `filename="${file.dom.files[0].name}"\r\n`; // 和文件的 MIME 类型 data += `Content-Type: ${file.dom.files[0].type}\r\n`; // 元数据和数据之间有一条空行。 data += "\r\n"; // 将二进制数据添加到主体请求中 data += file.binary + "\r\n"; } // 文本数据更简单一些 // 在主体请求中开始一个新的部分 data += `--${boundary}\r\n`; // 假设这是表单数据，并命名它 data += `content-disposition: form-data; name="${text.name}"\r\n`; // 元数据和数据之间有一条空行。 data += "\r\n"; // 添加文本数据到主体请求中 data += text.value + "\r\n"; // 一旦完成，“关闭”主体请求 data += `--${boundary}--`; // 定义成功提交数据执行的语句 XHR.addEventListener("load", (event) => { alert("耶！已发送数据并加载响应。"); }); // 定义发生错误时做的事 XHR.addEventListener("error", function (event) { alert("哎呀！出现了一些问题。"); }); // 建立请求 XHR.open("POST", "https://example.com/cors.php"); // 添加需要的 HTTP 头部来处理多部分表单数据 POST 请求 XHR.setRequestHeader( "Content-Type", `multipart/form-data; boundary=${boundary}`, ); // 最后，发送数据。 XHR.send(data); } // 获取表单元素 const form = document.getElementById("theForm"); // 添加 submit 事件处理器 form.addEventListener("submit", (event) => { event.preventDefault(); sendData(); }); });

这里是实时演示效果：

【本文地址】

使用 JavaScript 发送表单

使用 JavaScript 发送表单

今日新闻

推荐新闻