Javascript 使用XHR提交HTML表单不'；无法在基于iOS/iPadOS的设备上工作

我制作了一个HTML表单，它可以使用将数据发送到google表单。 给出的方法可以成功地将数据提交到googlesheets。但如果在iOS/iPadOS设备上使用，则无论浏览器是什么（在Safari和Chrome上测试），表单提交都无法工作。我怀疑XHR是这里的罪魁祸首，但我找不到有效的解决方案。 下面是表单提交函数的片段

  function handleFormSubmit(event) {  // handles form submit without any jquery
    event.preventDefault();           // we are submitting via xhr below
    var form = event.target;
    var formData = getFormData(form);
    var data = formData.data;

    // If a honeypot field is filled, assume it was done so by a spam bot.
    if (formData.honeypot) {
      return false;
    }

    disableAllButtons(form);
    var url = form.action;
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url);
    // xhr.withCredentials = true;
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        form.reset();
        var formElements = form.querySelector('.form-elements');
        if (formElements) {
          formElements.style.display = 'none'; // hide form
        }
        var thankYouMessage = form.querySelector('.thankyou_message');
        if (thankYouMessage) {
          thankYouMessage.style.display = 'block';
        }
      }
    };
    // url encode form data for sending as post data
    var encoded = Object.keys(data).map(function(k) {
      return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
    }).join('&');
    xhr.send(encoded);
  }

  function loaded() {
    // bind to the submit event of our form
    var forms = document.querySelectorAll('form.gform');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', handleFormSubmit, false);
    }
  };
  document.addEventListener('DOMContentLoaded', loaded, false);

  function disableAllButtons(form) {
    var buttons = form.querySelectorAll('button');
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].disabled = true;
    }
  }
})();

（我在我的项目中使用Angular，如果这有任何帮助的话。我将这些函数放在

ngOnInit（）之外。

其他信息： 这是我在上面提到的函数之外放的另一个函数，它正好放在上面那些函数的上面

(function finalization() {
  // get all data in form and return object
  function getFormData(form) {
    var elements = form.elements;
    var honeypot;

    var fields = Object.keys(elements).filter(function(k) {
      if (elements[k].name === 'honeypot') {
        honeypot = elements[k].value;
        return false;
      }
      return true;
    }).map(function(k) {
      if (elements[k].name !== undefined) {
        return elements[k].name;
        // special case for Edge's html collection
      } else if (elements[k].length > 0) {
        return elements[k].item(0).name;
      }
    }).filter(function(item, pos, self) {
      return self.indexOf(item) == pos && item;
    });

    var formData = <any> {};
    fields.forEach(function(name) {
      var element = elements[name];

      // singular form elements just have one value
      formData[name] = element.value;

      // when our element has multiple items, get their values
      if (element.length) {
        var data = [];
        for (var i = 0; i < element.length; i++) {
          var item = element.item(i);
          if (item.checked || item.selected) {
            data.push(item.value);
          }
        }
        formData[name] = data.join(', ');
      }
    });

    // add form-specific values into the data
    formData.formDataNameOrder = JSON.stringify(fields);
    formData.formGoogleSheetName = form.dataset.sheet || 'responses'; // default sheet name
    formData.formGoogleSend
      = form.dataset.email || ''; // no email by default

    return {data: formData, honeypot: honeypot};
  }

（函数终结（）{
//获取表单中的所有数据并返回对象
函数getFormData（表单）{
var元素=form.elements；
var蜜罐；
变量字段=对象。键（元素）。过滤器（函数（k）{
if（元素[k].name===‘蜜罐’）{
蜜罐=元素[k]。值；
返回false；
}
返回true；
}).map（函数（k）{
if（元素[k].name！==未定义）{
返回元素[k].name；
//Edge的html集合的特殊情况
}else if（元素[k]。长度>0）{
返回元素[k]。项（0）。名称；
}
}).过滤器（功能（项目、位置、自身）{
返回自身索引（项目）=位置和项目；
});
var formData={}；
fields.forEach（函数（名称）{
变量元素=元素[名称]；
//单数形式元素只有一个值
formData[name]=element.value；
//当我们的元素有多个项时，获取它们的值
if（元素长度）{
var数据=[]；
对于（变量i=0；i

这不是一种有角度的处理方式。我希望在发出http请求时看到类似于此示例代码的内容

import { HttpClient, HttpParams } from '@angular/common/http';

constructor(private http: HttpClient) {
}

sendRequest(): void {
  // create body of POST in some way
  const httpParams: HttpParams = new HttpParams({
    fromObject: {
      key: 'value'
    }
  });

  this.http.post(this.url, body).subscribe(response => {
    // do something with the response
    console.log(response);
  });
}

您可能有充分的理由使用本机XMLHttpRequest，但距离实现它还有很长的路要走

import { HttpClient, HttpParams } from '@angular/common/http';

constructor(private http: HttpClient) {
}

sendRequest(): void {
  // create body of POST in some way
  const httpParams: HttpParams = new HttpParams({
    fromObject: {
      key: 'value'
    }
  });

  this.http.post(this.url, body).subscribe(response => {
    // do something with the response
    console.log(response);
  });
}