Question

我对Web技术是陌生的，这使我发现其中大部分困难。我要实现的目标是，提交表单后，在进行 Ajax 调用之前，应首先检查互联网连接。

我尝试通过以下方式使用 navigator.onLine ：

if(navigator.onLine == true) {
    //code comes here
} else {
    alert('Internet connection is lost');
    $('#error').append("No internet connection. We could not submit the form");
}

有人可以告诉我如何修改代码以适合我的需求。

$('document').ready(function(){ 
    /* validation */
    $("#licence-form").validate({
        rules:
        { 
            licence: {
                required: true
            },
        },
        messages:
        {
            licence:{
                required: "License key is required"
            },

        },
        submitHandler: licenceForm  
    });  
    /* validation */

    /* submit */
    function licenceForm()
    {       
        var data = $("#licence-form").serialize();

        $.ajax({

            type : 'POST',
            url  : '../includes/b0a012.php',
            data : data,
            beforeSend: function()
            {   
                $("#error").fadeOut();
                $("#btn-login").html('Validating...');
            },
            success :  function(response)
                {                       
                if(response=="yes"){
                    $(".hideit").hide();
                    $(".shows").show();   
                    setTimeout(' window.location.href = "../setup.php"; ',4000);
                }else{      
                    $("#error").fadeIn(1000, function(){                        
                        $("#error").html('<div class="alert alert-danger text-center"> <img src="../images/attention.png" width="45" height="40" /> <br/> '+response+'</div>');
                    });

                }
            }
        });
        return false;
    }
});

Answer 1

为此，navigator.onLine属性并不是真正可靠的。实现differ和状态仅在进行实际连接尝试时更新。

相反，将error处理程序添加到$.ajax参数对象中：

error:  function(xhr, status, error) {
    $(".hideit").hide();
    $(".shows").show();    
    $("#error").fadeIn(1000, function(){                      
          $("#error").html('<div class="alert alert-danger text-center"> <img src="../images/attention.png" width="45" height="40" /> <br/> '+status+' ' + error + '</div>');
    });
}

Answer 2

navigator.onLine在不同的浏览器中的工作方式有所不同，尝试通过向服务器发送GET请求来检查Internet连接。通过这种方式，您可以确定连接性。

    var check_connectivity = {
    is_internet_connected: function() {
        return $.get({
            url: "/app/connectivity/",
            dataType: 'text',
            cache: false
        });
    },
    ...
};

现在

check_connectivity.is_internet_connected().done(function() {
   //  you are **probably** online.
   // Your form submission
}).fail(function(jqXHR, textStatus, errorThrown) {
    //Something went wrong. You may be offline.
});

提交表单之前检查互联网连接

2 个答案: