jquery post docs.google.com 表单 CORS - Javascript (1)

📌 相关文章

📜 jquery post docs.google.com 表单 CORS - Javascript (1)

📅 最后修改于: 2023-12-03 14:43:11.326000 🧑 作者: Mango

使用 jQuery Post 实现 Docs.google.com 表单的 CORS

当我们使用表单提交数据到 Google Docs 平台的时候，我们往往会看到浏览器报错信息：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是因为浏览器在请求 Google Docs 平台时会遵循跨域策略（Cross-Origin Resource Sharing，CORS），只有特定源（origin）的页面才有权限访问 Google Docs 平台的资源。由于我们的表单提交页面不在 Google Docs 的同一域名下，所以浏览器就拒绝了我们的请求。

为了解决这个问题，我们需要在表单提交页面里使用 AJAX 技术实现跨域请求，即在 JavaScript 代码里使用 jQuery 的 .post() 方法发送表单数据到 Google Docs 平台。下面是一份示例代码：

$.ajax({
  url: 'https://docs.google.com/forms/d/e/1FAIpQLSemQgfyJr8hZwYn-O_GpKzWs_mIweOV9JQiNfHj0bJ2FtQrWw/formResponse',
  type: 'POST',
  data: {
    'entry.1234567890': 'John Doe', // 替换为实际的表单域 ID 和值
    'entry.0987654321': 'foobar@example.com',
  },
  dataType: 'json',
  success: function(response) {
    console.log('Submitted successfully:', response);
  },
  error: function(xhr) {
    console.error('Failed to submit:', xhr.statusText);
  },
});

上面的代码将会向一个 Google Docs 表单提交两个字段的内容，并在提交成功或失败后分别输出相应的消息。其中的 'entry.xxxxxxxxx' 是你在 Google Docs 表单里创建的每个字段的 ID，通过浏览器开发者工具可以查看，而 dataType 参数表示响应格式。如果你提交的表单包含文件，则需要使用 FormData 类型发送请求。

需要注意的是，Google Docs 平台可能会对恶意或过于频繁的跨域请求进行限制，建议咨询 Google 官方文档或采用其他方式实现数据提交功能。

使用 jQuery Post 实现 Docs.google.com 表单的 CORS

参考资料