jQuery Ajax在cordova iOS应用程序上发送之前成功

Posted 2023-03-15

【中文标题】jQuery Ajax在cordova iOS应用程序上发送之前成功

【英文标题】：jQuery Ajax Firing success before beforesend on cordova iOS app

【发布时间】：2014-08-12 12:17:12

【问题描述】：

以下摘录会更改登录按钮的 html，直到收到来自服务器的响应。

在使用 Cordova 构建的应用程序中在我的 iPhone 上进行测试时。在更新登录按钮的 html 之前触发警报。在桌面浏览器中，它按预期工作。

我尝试将缓存和异步设置为 false，但没有任何区别。

除了不同的 ajax 库，我想不出还有什么可以尝试的？

有没有更好的库可用于带有 cordova 的 AJAX？

$.ajax(
    data: $data,
    cache: false,
    async: false,
    beforeSend: function() 
        $('#btn-login').html('Logging In...');
    ,
    success: function(r, status) 
         if (r.status == 'success') 
             getUser();
             initNavSwipeGestures();
             $('#page-index').removeClass('active');
         else 
            alert(r.message);
        
    ,
    error: function(data, status) 
        alert(status);
    
);

【问题讨论】：

哪个警报被触发，成功还是错误？

成功正在被解雇。

那么警报中会显示什么？

来自服务器的响应消息 - 登录详细信息不正确

“登录...”将异步执行。很可能会立即调用成功，因此肉眼看不到“登录..”更新。您可以使用 setTimeout(约 5 秒) 调用成功回调，并在更新之前检查状态“正在登录..”是否正在显示。

【参考方案1】：

成功时调用Success - http://api.jquery.com/jquery.ajax/:

成功 类型：函数（PlainObject 数据，字符串 textStatus，jqXHR jqXHR） 请求成功时调用的函数。该函数获得三个参数： 从服务器返回的数据，根据 dataType 参数格式化；描述状态的字符串；和 jqXHR（在 jQuery 1.4.x 中，XMLHttpRequest）对象。从 jQuery 1.5 开始，success 设置可以接受一个函数数组。每个函数都会被依次调用。这是一个 Ajax 事件。

如果要检查返回的数据，请使用“成功”...否则应使用“完整”。

这样的事情应该可以工作：

$.ajax(
    data: $data,
    cache: false,
    async: false,
    beforeSend: function() 
        $('#btn-login').html('Logging In...');
    ,
    success: callback()
    ,
    complete : function() 
         getUser();
         initNavSwipeGestures();
         $('#page-index').removeClass('active');        
    ,
    error: function(data, status) 
        alert(status);
    
);

var callback = function(response) 
   ///stuff to do after success here
;

【讨论】：

是的，我的 json 响应中也返回了成功|错误，表示登录是否成功。我在成功回调中检查。

你试过在 safari 中测试它吗？对于我发现的 ios 混合应用来说，这是一个更好的测试平台。

感谢您的提示。我还没有找到调试我的应用程序的方法。我只用了几天 Cordova。

它是无价的... 检查元素 - 用于 console.log("") 的控制台 - 检查元素窗口顶部的资源选项卡将允许您查看本地存储或 webSQL 数据库。您还可以在 UI 方面更接近您将在手机上看到的最终结果。真是无价之宝！

【参考方案2】：

这就是我最终得到的结果：

$('#form-login').on('submit', function(e)      
    e.preventDefault();
    if ($.trim($('#email').val()) === '' || $.trim($('#password').val()) === '') 
        return;
    

    var loginBtn = Ladda.create( document.querySelector('#btn-login') );
    $data = $('#form-login').serializeArray();

    $.ajax(
        data: $data,
        beforeSend: function() 
            $('#btn-login').addClass('isloading');
            loginBtn.start();
        ,
        success: function(r, status) 
            setTimeout(loginResponse(r, loginBtn), 500);
        ,
        error: function(data, status) 
            if (PLATFORM == 'desktop') 
                alert(status);
             else 
                loginBtn.stop();
                $('#btn-login').removeClass('isloading');
                navigator.notification.alert(status, false, false);
            
        
    );
);

function loginResponse(r, loginBtn) 
    if ($('#btn-login').hasClass('isloading')) 
        if (r.status == 'success') 
            getUser();
            $('#page-index').removeClass('active');
         else 
           if (PLATFORM == 'desktop') 
                alert(r.message);
             else 
                navigator.notification.alert(r.message, false, false);
            
        
        loginBtn.stop();
        $('#btn-login').removeClass('isloading');
     else 
        setTimeout(loginResponse(r, loginBtn), 500);