每次显示页面时，使用jQuery Mobile在div中显示JSON_Jquery_Ajax_Json_Html_Jquery Mobile

每次显示页面时，使用jQuery Mobile在div中显示JSON

jquery ajax json html jquery-mobile

每次显示页面时，使用jQuery Mobile在div中显示JSON,jquery,ajax,json,html,jquery-mobile,Jquery,Ajax,Json,Html,Jquery Mobile,我试图让我的jQuery移动应用程序在用户登录并连接相册时显示相册信息。我正在使用$.ajax发布到我的服务器并获取数据。当应用程序打开时，正确的数据显示在主页上，但当我导航到应该显示该数据的其他页面时，div为空，即使我知道正在检索数据。这几乎像是div没有被正确注射。下面是我的主页和上传页面主页： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta nam

我试图让我的jQuery移动应用程序在用户登录并连接相册时显示相册信息。我正在使用$.ajax发布到我的服务器并获取数据。当应用程序打开时，正确的数据显示在主页上，但当我导航到应该显示该数据的其他页面时，div为空，即使我知道正在检索数据。这几乎像是div没有被正确注射。下面是我的主页和上传页面

主页：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wedding Connect</title>
    <link href="css/jquery-mobile.css" rel="stylesheet" />
    <link href="css/application.css" rel="stylesheet" />
    <script src="js/jquery.js"></script>
    <!-- <script src="js/application.js">script> -->
    <script src="js/jquery-mobile.js"></script>
    <script src="js/cordova.js"></script>
</head>
<body>
<div data-role="page" id="home" data-title="Home" data-add-back-btn="true" data-back-btn-text="Back">

    <!-- header -->
    <div id="header" data-role="header"><p align="center">Welcome to Wedding Connect</p></div>
    <!-- /header -->

    <!-- content -->
    <div id="content" data-role="content">
        <div id="album-info"></div>
        <nav>
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li><a href="login.html" data-transition="slide">Enter Album Code</a></li>
                <li><a href="upload.html" data-transition="slide">Upload a Photo</a></li>
                <li><a href="instructions.html" data-transition="slide">Instructions</a></li>
            </ul>
        </nav>
    </div>
    <!-- /content -->

    <!-- footer -->
    <div id="footer" data-role="footer" data-position="fixed">
        <nav data-role="navbar">
            <ul>
                <li><a href="home.html" data-transition="slide" data-icon="home" data-theme="b">Home</a></li>
                <li><a href="upload.html" data-transition="slide" data-icon="plus" data-theme="b">Upload Photo</a></li>
                <li><a href="update.html" data-transition="slide" data-icon="gear" data-theme="b">New Album</a></li>
                <li><a href="instructions.html" data-transition="slide" data-icon="info" data-theme="b">Instructions</a></li>
            </ul>
        </nav>
    </div>
    <!-- /footer -->

    <script>
    $("#home").on('pageshow', function () {
        // For testing purposes only
        localStorage.setItem('album_code', '1234');
        var album_code = localStorage.getItem('album_code');
        if (album_code !== null) {
            // Attempt to authenticate the album code
            $.ajax({  
                url: "http://localhost/weddingconnect/index.php/mobile/verify",
                type: "post",  
                data: {album_code: album_code},
                dataType: 'json',
                crossDomain: true,
                error:function() {
                    alert('Server communication error. Could not validate stored album code.');
                },
                success: function(data) {
                    if (data.response == "TRUE") {
                        // Retrieve album information
                        $.ajax({
                            url: "http://localhost/weddingconnect/index.php/mobile/get-album",
                            type: "post",
                            data: {album_code: album_code},
                            dataType: 'json',
                            crossDomain: true,
                            error: function() {
                                alert('Server communication error. Could not retrieve album information.');
                            },
                            success: function(data) {
                                if (data.response == "TRUE") {
                                    $('#album-info').html(
                                        '<p align="center"><strong>Album:</strong> ' + 
                                        data.album + ' <strong>By:</strong> ' + 
                                        data.bride + ' & ' + 
                                        data.groom + '</p>'
                                    );
                                } else {
                                    $('#album-info').html('<p align="center">Error retrieving album information.</p>');
                                }
                            }
                        });                 
                    } else {
                        localStorage.removeItem('album_code');
                        $('#album-info').html('<p align="center">You are not connected to an album at this time.</p>');
                    }
                }
            });
        }
    });
    </script>

</div>
</body>
</html>


婚礼连接
欢迎使用婚礼连接











$（“#主页”）。在（'pageshow'，函数（）{
//仅用于测试目的
setItem（'album_code'，'1234'）；
var album_code=localStorage.getItem（'album_code'）；
如果（相册代码！==null）{
//尝试验证相册代码
$.ajax（{
url:“http://localhost/weddingconnect/index.php/mobile/verify",
类型：“post”，
数据：{album_code:album_code}，
数据类型：“json”，
跨域：是的，
错误：函数（）{
警报（'服务器通信错误。无法验证存储的相册代码'）；
},
成功：功能（数据）{
如果（data.response==“TRUE”）{
//检索相册信息
$.ajax({
url:“http://localhost/weddingconnect/index.php/mobile/get-album",
类型：“post”，
数据：{album_code:album_code}，
数据类型：“json”，
跨域：是的，
错误：函数（）{
警报（'服务器通信错误。无法检索相册信息'）；
},
成功：功能（数据）{
如果（data.response==“TRUE”）{
$（'#相册信息'）.html(
“相册：”+
data.album+'作者：'+
data.bride+'&'+
data.groom+“”
);
}否则{
$（“#相册信息”）.html（“检索相册信息时出错。”；
}
}
});                 
}否则{
localStorage.removietem（'album_code'）；
$（“#相册信息”）.html（“您此时未连接到相册。”；
}
}
});
}
});

上传页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wedding Connect</title>
    <link href="css/jquery-mobile.css" rel="stylesheet" />
    <link href="css/application.css" rel="stylesheet" />
    <script src="js/jquery.js"></script>
    <!-- <script src="js/application.js">script> -->
    <script src="js/jquery-mobile.js"></script>
    <script src="js/cordova.js"></script>
</head>
<body>
<div data-role="page" id="upload" data-title="Upload" data-add-back-btn="true" data-back-btn-text="Back">

    <div data-role="header"><p align="center">Welcome to Wedding Connect</p></div>

    <div data-role="content">
        <div id="album-info"></div>
        <script src="js/upload.js"></script>
        <input type="hidden" id="serverUrl" value="http://localhost/weddingconnect/mobile/upload" />
        <input type="button" onclick="capturePhoto();" value="Take Picture" />
        <input type="button" onclick="getPhoto(pictureSource.PHOTOLIBRARY);" value="Select Picture" />
        <input type="button" onclick="uploadPhoto();" value="Upload" data-theme="b" />
        <img id="smallImage" src="" />
        <img id="largeImage" src="" />
    </div>

    <div id="footer" data-role="footer" data-position="fixed">
        <nav data-role="navbar">
            <ul>
                <li><a href="home.html" data-transition="slide" data-icon="home" data-theme="b">Home</a></li>
                <li><a href="upload.html" data-transition="slide" data-icon="plus" data-theme="b">Upload Photo</a></li>
                <li><a href="update.html" data-transition="slide" data-icon="gear" data-theme="b">New Album</a></li>
                <li><a href="instructions.html" data-transition="slide" data-icon="info" data-theme="b">Instructions</a></li>
            </ul>
        </nav>
    </div>

    <script>
    $("#upload").on("pageshow", function() {
        //alert('upload');
        var album_code = localStorage.getItem('album_code');
        //alert(album_code);

        // If no album code is present send the user to the login page
        if (album_code === null) {
            $.mobile.changePage("login.html", {
                transition: "slide"
            });
        }
        // Retrieve the album information
        $.ajax({  
            url: "http://localhost/weddingconnect/index.php/mobile/get-album",
            type: "post",  
            data: {album_code: album_code},
            dataType: 'json',
            crossDomain: true,
            error:function() {
                alert('Server communication error. Could not retrieve album information.');
            },
            success: function(data) {
                if (data.response == "TRUE") {
                    alert(data.groom);
                    $('#album-info').html(
                        '<p align="center"><strong>Album:</strong> ' + 
                        data.album + ' <strong>By:</strong> ' + 
                        data.bride + ' & ' + 
                        data.groom + '</p>'
                    );
                } else {
                    $('#album-info').html('<p align="center">Error retrieving album information.</p>');
                }
            }
        });
    });
    </script>

</div>
</body>
</html>


婚礼连接
欢迎使用婚礼连接






$（“#上传”）。在（“pageshow”，函数（）上{
//警报（“上传”）；
var album_code=localStorage.getItem（'album_code'）；
//警报（相册编码）；
//如果没有相册代码，请将用户发送到登录页面
如果（相册代码===null）{
$.mobile.changePage（“login.html”{
过渡：“幻灯片”
});
}
//检索相册信息
$.ajax（{
url:“http://localhost/weddingconnect/index.php/mobile/get-album",
类型：“post”，
数据：{album_code:album_code}，
数据类型：“json”，
跨域：是的，
错误：函数（）{
警报（'服务器通信错误。无法检索相册信息'）；
},
成功：功能（数据）{
如果（data.response==“TRUE”）{
警报（data.groom）；
$（'#相册信息'）.html(
“相册：”+
data.album+'作者：'+
data.bride+'&'+
data.groom+“”
);
}否则{
$（“#相册信息”）.html（“检索相册信息时出错。”；
}
}
});
});

我觉得我错过了一些简单的东西。我知道你不能使用$（document）.ready（function（）{和jQM一起使用，所以我对每个页面都使用pagebeforeshow。如何使它在每次显示页面时正确显示？提前感谢。

是$（“#upload”）。在（“pagebeforeshow”）上接到呼叫？不，不是。我试图提醒相册代码，但什么也没有收到，所以我将所有pagebeforeshow更改为pageshow。之后，提醒显示了正确的内容。然后我在试图将数据附加到div的位置上方放置了另一个提醒。该提醒框显示了正确的数据，但没有附加到div。我不明白d、你能展示一下你的HTML文件吗