javascript - html 表单不将数据传输到谷歌电子表格

Question

嗨，我一直在关注本教程 submit data from html forms to google sheets ajax代码如下:

var $form = $('form#test-form'),
  url = 

'https://script.google.com/macros/s/AKfycbwoNkRscUxkp7bOdHx3pPwj4D2doLATbgqEYKOoaIRFXCdRPlM/exec '

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
  url: url,
  method: "GET",
  dataType: "json",
  data: $form.serializeObject()
  }).success(
// do something
    );
  })

我遇到的问题是数据没有传输到谷歌电子表格。下面是html代码。

<form id="test-form">

<div>
  <label>Field 1</label>
  <input type="text" name="Groceries" placeholder="Field 1"/>
 </div>

 <div>
   <label>Field 2</label>
   <input type="text" name="Diary" placeholder="Field 2"/>
 </div>

  <div>
    <label>Field 3</label>
    <input type="text" name="Meat" placeholder="Field 3"/>
  </div>

<div>
  <label>Field 4</label>
  <input type="text" name="Fish" placeholder="Field 4"/>
</div>

<div>
  <button type="submit"id="submit-form">Submit</button>
</div>

Answer 1

您在控制台中收到 CORS 错误吗？

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果是这样，我通过将数据类型从“json”更改为“jsonp”来使其工作。另外，AJAX 请求的成功部分应该位于对象内部。

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "jsonp",
    data: $form.serializeObject(),
    success: function() {
      console.log('it worked')
    }
  })
})