Safari和iOS设备上的jQuery AJAX 出错

shstlldc 于 2022-11-03 发布在 jQuery

关注(0)|答案(3)|浏览(234)

我有一个与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

我怎么能修好它？一些想法？
谢谢你！

jquery

来源：https://stackoverflow.com/questions/64419683/error-with-jquery-ajax-on-safari-and-ios-devices

3条答案

按热度按时间

uxhixvfz1#

目前，您的代码没有任何错误捕获块。
尝试将函数内容插入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);

赞(0）回复(0）举报 2022-11-03

cetgtptt2#

下面是完整的代码片段：

(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);

赞(0）回复(0）举报 2022-11-03

4xy9mtcn3#