Safari和iOS设备无法与jQuery AJAX调用一起使用

Question

我正在尝试通过AJAX设置Cookie。 它适用于Android设备，Chrome，FF，Opera，Microsoft Edge，IE，但Safari和iOS设备除外。 关于Safari和iOS，我缺少AJAX隐藏的神奇之处吗？

这是我在Android设备/ etc上可以使用的代码。

Javascript文件

function setCookie() {
var $cookieName   = 'example-cookie',
            $cookieMethod = 'example-method',
            $cookieGet    = 'example-get'

        $.ajax({
            type: 'POST',
            url: $(location).attr('protocol') + 'to/location.php',
            data: {
                name: $cookieName,
                method: $cookieMethod,
                get: $cookieGet
            },
            cache: false,
            success: function(data, textStatus, jQxhr) {
                try {
                    $('.report .display-result').css('display', 'none').css('position', 'absolute')
                        .css('width', '100%').html($(data).filter('.display').html()).fadeIn(1000);

                    setTimeout(function() {
                        $('.report .display-result').fadeOut(1000);
                    }, 4000);
                } catch (err) {/*alert(err);*/}
            },
            error: function(jqXhr, textStatus, errorThrown) {
                try {
                    alert(jqXhr.responseText);
                } catch (err) {/*alert.log(err);*/}
            }
        });
    }

PHP文件

    <?php

require_once '../to/class/Class.php';

$uc           = new Class();
$cookieName   = $_POST['name'];
$cookieMethod = $_POST['method'];
$cookieId     = $_POST['get'];

$uc->method($_POST['name'], $_POST['method'], $_POST['get']);
?>

<?php
if (!empty($uc->method($_POST['name'], 'get-cookie'))):
    $cookie = json_decode($uc->method($_POST['name'], 'get-cookie'));

    // Making sure the cookie exists and is not empty.
    if (!empty($cookie)):
        // Making sure the cookie has id's, if not, will spit out 'Successly added to report'.
        if (isset($cookie->data->id)) {
            foreach ($cookie->data->id as $chkDuplicates) {
                // If any id's match, there is a duplicate. Make sure that they know they've added this already.
                if ($chkDuplicates == $_POST['get']) {
                    $duplicateFound = true;
                    break;
                }
            }
        }

        if (isset($duplicateFound)): ?>
            <div class="display info">
                <h3 class="alert alert-info">You've already added this to your report.</h3>
            </div>
        <?php else: ?>
            <div class="display success">
                <h3 class="alert alert-success">Successfully added to report.</h3>
            </div>
        <?php endif; ?>
    <?php endif; ?>
<?php else: ?>
    <div class="display failure">
        <h3 class="alert alert-failure">Unfortunately, that item wasn't added, please refresh the page and try again.</h3>
    </div>
<?php endif; ?>

无论出于何种原因，这似乎在Safari和iOS设备中均不起作用。 每当我尝试获取警报（jqXhr）时，我什么都没有。 jqXhr.responseText也是如此，textStatus给我“错误”，errorThrown与其他内容一样是空白。 我对此有些茫然。 非常感谢您在这里的任何支持，并感谢您抽出宝贵时间来研究此问题。

Answer 1

Safari可以对AJAX请求进行大量的缓存。 也许您之前在响应完全正常工作并且您的API给出了空响应之前就已经在Safari中测试了jQuery。

尝试执行以下操作，对API url + '&nocache=' + new Date().getTime()进行以下更改，从而使Safari缓存无效。 这样做基本上是使Safari在每次请求时都将Ajax url视为不同的url，因此Safari将从您的API端点获得新的响应。

 $.ajax({
            type: 'POST',
            url: $(location).attr('protocol') + 'to/location.php' + '&nocache=' + new Date().getTime(),
            data: {
                name: $cookieName,
                method: $cookieMethod,
                get: $cookieGet
            },
            cache: false,
            success: function(data, textStatus, jQxhr) {
                try {
                    $('.report .display-result').css('display', 'none').css('position', 'absolute')
                        .css('width', '100%').html($(data).filter('.display').html()).fadeIn(1000);

                    setTimeout(function() {
                        $('.report .display-result').fadeOut(1000);
                    }, 4000);
                } catch (err) {/*alert(err);*/}
            },
            error: function(jqXhr, textStatus, errorThrown) {
                try {
                    alert(jqXhr.responseText);
                } catch (err) {/*alert.log(err);*/}
            }
        });

Answer 2

好的，所以它与JS文件和AJAX的URL有关。

显然，iOS / Safari无法读取

$(location).attr('protocol')

因此请确保将其更改为

$(location).attr('origin')

嘘，这么简单的事情花了很长时间才找到。 希望这对将来的任何人有帮助。