Safari 和 iOS 设备上的 jQuery AJAX 错误答案

【问题标题】：error with jQuery AJAX on Safari and iOS devicesSafari 和 iOS 设备上的 jQuery AJAX 错误
【发布时间】：2021-02-01 18:39:51
【问题描述】：

我遇到了与 Safari 和所有 iOS 设备的兼容性问题。我为一个项目创建了这个 jQuery 代码（参见下面的链接），但我不明白为什么它不能与 Safari 一起使用。在 Chrome、Firefox、Android 上运行良好。

(function ($) {
  $.ajaxSetup({ cache: false });

  const ajax_dir = '/wp-content/plugins/oxygen-functions/assets/ajax/';
  
  // SELECT LOCATION-SERVICE FORM

  $('.serv-select select').html(select_vars.services_select);
  $('.loc-select select').html(select_vars.locations_select);
  $('.service-location-form')
    .closest('form')
    .submit(async function (e) {
    e.preventDefault();
    
    $(this).find('.frm_message').addClass('d-none');

      var form = $(this).serializeArray(),
        service = form.find((x) => x['name'] == `item_meta[33]`).value,
        loc = form.find((x) => x['name'] == `item_meta[34]`).value,
        cat = loc + ',' + service,
        posts = await $.ajax({
          type: 'post',
          async: true,
          url: ajax_dir + 'posts-by-cat.php',
          dataType: 'json',
          data: {
            post_type: 'services',
            cat: cat,
          },
        }),
        url = await $.ajax({
          type: 'post',
          async: true,
          url: ajax_dir + 'post-link-id.php',
          dataType: 'json',
          data: {
            id: posts[0],
          },
        });
      //console.log(url);
      location.href = url;
    });
})(jQuery);

这是我从 DevConsole 得到的错误：

Unhandled Promise Rejection [object Object]
  (anonymous function) - scripts.js:21
  asyncFunctionResume
  (anonymous function)
  promiseReactionJobWithoutPromise

我该如何解决？有什么想法吗？

谢谢！

【问题讨论】：

您正在使用async 函数提交。
我正在使用该函数在两种类型的 CPT 之间生成链接。这是创建下拉菜单的唯一解决方案，您可以在其中选择选项 1、选项 2 --> 提交 --> 转到正确的链接。
如果您使用表单并且有一个提交按钮（因此不会发生真正的提交），您确实需要event.preventDefault() onsubmit，但是使用 AJAX 时，您不必强制执行实际的 submit 事件。您可以简单地使用change 事件来触发 AJAX。实际的表单提交是老派。无论哪种方式，都摆脱async和awaits。 xhr 将立即与那些 awaits 一起返回......而且你不希望你的 jQuery 事件函数返回任何东西。

标签： javascript jquery ios ajax safari

【解决方案1】：

目前，您的代码没有任何错误捕获块。

尝试将函数内容插入try/catch块

(function ($) {
  $.ajaxSetup({ cache: false });

  const ajax_dir = '/wp-content/plugins/oxygen-functions/assets/ajax/';
  
  // SELECT LOCATION-SERVICE FORM

  $('.serv-select select').html(select_vars.services_select);
  $('.loc-select select').html(select_vars.locations_select);
  $('.service-location-form')
    .closest('form')
    .submit(async function (e) {
      e.preventDefault();

      try {

        $(this).find('.frm_message').addClass('d-none');

        var form = $(this).serializeArray(),
        service = form.find((x) => x['name'] == `item_meta[33]`).value,
        loc = form.find((x) => x['name'] == `item_meta[34]`).value,
        cat = loc + ',' + service,
        posts = await $.ajax({
          type: 'post',
          async: true,
          url: ajax_dir + 'posts-by-cat.php',
          dataType: 'json',
          data: {
            post_type: 'services',
            cat: cat,
          },
        }),
        url = await $.ajax({
          type: 'post',
          async: true,
          url: ajax_dir + 'post-link-id.php',
          dataType: 'json',
          data: {
            id: posts[0],
          },
        });
        //console.log(url);
        location.href = url;
      } catch(err) {
        console.log(err);
        // Handle error here. - maybe ajax fail
      }
    });
})(jQuery);

【讨论】：

如果您还需要根据这个问题解决问题，请告诉我。
嘿@StefanWang 感谢您的跟进。我没有解决您的 sn-p 的问题。我的一个朋友建议我使用“e.stopImmediatePropagation();”
好的。感谢你的信息。无论如何，很高兴听到你解决了这个问题。请您在此处发布答案，以便其他人将来可以参考吗？

【解决方案2】：

这是整个sn-p：

(function ($) {
  $.ajaxSetup({ cache: false });

  const ajax_dir = '/wp-content/plugins/oxygen-functions/assets/ajax/'; 
  // SELECT LOCATION-SERVICE FORM

  $('.serv-select select').html(select_vars.services_select);
  $('.loc-select select').html(select_vars.locations_select);

  var closestForm = $('.service-location-form').closest('form');

  closestForm.submit(async function (e) {
    e.preventDefault();
    e.stopImmediatePropagation(); // <-- I fixed my issue with it

    $(this).find('.frm_message').addClass('d-none');

    var form = $(this).serializeArray();
    var service = form.find((x) => x['name'] == `item_meta[33]`).value;
    var loc = form.find((x) => x['name'] == `item_meta[34]`).value;
    var cat = loc + ',' + service;
    try {
      var posts = await $.ajax({
        type: 'post',
        async: true, // true was a string
        url: ajax_dir + 'posts-by-cat.php',
        dataType: 'json',
        data: {
          post_type: 'services',
          cat: cat,
        },
      });
    } catch (safariError) {
      console.error(safariError);
    }

    var url = await $.ajax({
      type: 'post',
      async: true, // also was 'true'
      url: ajax_dir + 'post-link-id.php',
      dataType: 'json',
      data: {
        id: posts[0],
      },
    });

    //console.log(url);
    location.href = url;
  });
})(jQuery);

【讨论】：