将jQuery移动应用程序连接到服务器数据库，并在互联网连接关闭时打开弹出窗口

connect jQuery Mobile Application to server database and open popup when internet connection off

本文关键字：连接 互联网 窗口 应用程序 移动 jQuery 服务器 数据库      更新时间：2023-09-26

我正在使用jQuery Mobile和phonegap开发移动应用程序。

我的第一个问题是

1. 在这个应用程序中，我需要服务器端集成。我有自己的服务器。我需要的是，在我的应用程序中有一个称为图像的页面，所以我需要将此页面与我的服务器数据库连接，这样每次我在服务器数据库上上传图像时，应用程序都会自动更新。

第二个问题是：

2. 我想在我的应用程序中打开一个网站。当互联网连接关闭时，弹出窗口显示错误消息

我试试这个。

 <!DOCTYPE html> 
 <html>
 <head>
 <meta charset="utf-8">
 <title>Website</title>
 <meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport"> 
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
 <script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
}
// alert dialog dismissed
function alertDismissed() {
    // do something
}
function checkReachability() {
    var _check=true;
    var networkState = navigator.network.connection.type;
    var states = {};
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 2G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.NONE]     = 'No network connection';
    //alert('Connection type: '+ networkState + states[networkState]);
    if(networkState==="unknown"){
        _check=false;
        showAlert();
        return _check;
    }
    else {
        return true;
    }
}
function showAlert() {
    navigator.notification.alert("Please connect your device to Internet.",onDeviceReady,"No Network Connectivity","OK");
}
</script>
<div data-role="content">
<iframe id="content" src="www.google.com" style="width:100%; height:100%; position:absolute; left:0px; top:40px; margin:0px; padding:0px; frameborder:0; border-width:0; border-style:hidden;">         </iframe>
</div>
</body>
</html>
I tested on Android 2.3 and 4.1 but does not any popup when internet connection is off.

我建议客户端功能每隔几秒钟就会触发一次，请求一个图像列表，如果出现错误，就会弹出警告：

setInterval(
    function(){
        $.ajax({
            type:'POST',
            url:'ping.php',
            data: {
                attribute_1:attribute_1,
                attribute_2:attribute_2
                },
            success: function(data){
                //process image list
            },
            error:  function(){
                //trigger popup
            }
        });
    },3000
);

编辑：对于图像处理步骤，您应该将图像列表与客户端列表进行比较，并检查新图像，因为您不希望在每次ajax调用时更新所有图像。

您还可以为ajax调用指定超时，例如：

$.ajax({
    ...
    timeout: 1000,
    error: function(jqXHR, textStatus, errorThrown) {
        if(textStatus==="timeout") {
            //trigger popup
        } 
    }
});

此处提供关于$.ajax（）的API文档：http://api.jquery.com/jquery.ajax/

相关文章：