使用 JavaScript 发送表单 |
您所在的位置：网站首页 › form提交表单上传图片代码 › 使用 JavaScript 发送表单 |
|
手动建立一个 HTTP 请求非常困难。幸运的是，最近的 XMLHttpRequest 规范提供了一种方便简单的方法 — 利用FormData对象来处理表单数据请求。 FormData 对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。请注意，FormData 对象是“只写”的，这意味着您可以更改它们，但不能检索其内容。 使用这个对象在Using FormData Objects中有详细的介绍，不过这里有两个例子： 使用一个独立的 FormData 对象html 点我！你应该会觉得那个 HTML 示例很熟悉。 js function sendData(data) { var XHR = new XMLHttpRequest(); var FD = new FormData(); // 把我们的数据添加到这个 FormData 对象中 for (name in data) { FD.append(name, data[name]); } // 定义数据成功发送并返回后执行的操作 XHR.addEventListener("load", function (event) { alert("Yeah! 已发送数据并加载响应。"); }); // 定义发生错误时执行的操作 XHR.addEventListener("error", function (event) { alert("Oops! 出错了。"); }); // 设置请求地址和方法 XHR.open("POST", "https://example.com/cors.php"); // 发送这个 formData 对象，HTTP 请求头会自动设置 XHR.send(FD); }在线演示： 使用绑定到表单元素上的 FormData你也可以把一个 FormData 对象绑定到一个 元素上。这会创建一个代表表单中包含元素的 FormData 。 这段 HTML 是典型的情况： html 告诉我你的名字：但是 JavaScript 接管了这个表单： js window.addEventListener("load", function () { function sendData() { var XHR = new XMLHttpRequest(); // 我们把这个 FormData 和表单元素绑定在一起。 var FD = new FormData(form); // 我们定义了数据成功发送时会发生的事。 XHR.addEventListener("load", function (event) { alert(event.target.responseText); }); // 我们定义了失败的情形下会发生的事 XHR.addEventListener("error", function (event) { alert("哎呀！出了一些问题。"); }); // 我们设置了我们的请求 XHR.open("POST", "https://example.com/cors.php"); // 发送的数据是由用户在表单中提供的 XHR.send(FD); } // 我们需要获取表单元素 var form = document.getElementById("myForm"); // ...然后接管表单的提交事件 form.addEventListener("submit", function (event) { event.preventDefault(); sendData(); }); });在线演示： 你甚至可以通过使用表单的elements 属性来更多的参与此过程，来得到一个包含表单里所有数据元素的列表，并且逐一手动管理他们。想了解更多，请参见示例访问表单控件。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |