0

我是一名资深程序员，但对整个手机应用程序编程很陌生，并且刚刚深入研究了 PhoneGap。我有一个非常简单的页面，我使用 JQuery Mobile、PhoneGap 和 Jquery 组合在一起，但遇到了障碍。当我单击 href 加载“新闻”页面时， .ajax() 方法似乎没有执行。我已经将它放在传统的文档就绪包装器中，并且删除它似乎并没有像我想的那样帮助解决问题。所以也许我都搞砸了，但我不知道为什么它不会触发，除非你刷新页面，然后它工作正常。可能是一个新手问题，但我觉得我是一年级程序员。

更新：为了清楚我的问题是什么，我正在 Firefox 中进行测试，并让 PhoneGap 桌面应用程序提供代码。当我单击“新闻”按钮时，页面会加载，但 Ajax 添加的元素不会出现。如果我在浏览器上点击刷新，页面会重新加载并出现元素。除非我更改强制 phonegap 桌面应用程序导致页面在手机上重新加载的代码，否则它们永远不会出现在手机上。所以它总是导致它发生的重新加载。

这是我的代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *; img-src * data:"" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>
<title>Hello World</title>
</head>

<body>
<div id="home" data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>My App</h1>
    </div>
    <div role="main" class="ui-content">
        <a href="news.html" class="ui-btn ui-corner-all ui-shadow">News</a>
        <a href="#" class="ui-btn ui-corner-all ui-shadow">Gigs</a>
    </div>
    <div data-role="footer" data-position="fixed"> 
        <h4>Footer content</h4> 
    </div>
</div>


</body>

</html>

这是news.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *; img-src * data:" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        var output = $('#news');

        $.ajax({
            url: 'http://xxxxxx.com/api/news/getnews',
            dataType: 'jsonp',
            cache : false,
            jsonp: 'jsoncallback',
            timeout: 5000,
            success: function(data, status){
                $.each(data, function(i,item){
                    var story = '<div data-role="collapsible"><h1>'+item.title+'</h1>'
                    + '<p>'+item.body+'<br><small>'
                    + item.date+'</small></p></div>';

                    output.append(story).enhanceWithin();
                });
            },
            error: function(){
                output.text('There was an error loading the data.');
            }
        });

    });    
</script>
<title>News</title>
</head>

<body>
<div id="home" data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>News</h1>
    </div>
    <div role="main" class="ui-content" id="news">
        <div data-role="collapsible">
            <h1>Hi</h1>
            <p>Am I collapsible?</p>
        </div>
    </div>
    <div data-role="footer" data-position="fixed"> 
        <h4>Footer content</h4> 
    </div>
</div>
</body>

</html>

有人能告诉我为什么除非我先刷新页面，否则 ajax 不会执行吗？提前致谢。

4

1 回答 1

-1

我终于弄明白了。news.html 页面不应该有 html、head 部分或 body 标记....只是 body 的内容。在摆脱了 jQuery 手机之后，将新页面加载到已经存在的“模板”中。

我确实继续将 jquery 的 document onready 事件替换为：

document.addEventListener("deviceready", function(){

所以现在我的新 news.html 页面如下所示：

<div id="home" data-role="page">
    <script type="text/javascript">
        document.addEventListener("deviceready", function(){

            var output = $('#news');

            $.ajax({
                url: 'http://xxxxxx.com/api/news/getnews',
                dataType: 'jsonp',
                cache : false,
                jsonp: 'jsoncallback',
                timeout: 5000,
                success: function(data, status){
                    $.each(data, function(i,item){
                        var story = '<div data-role="collapsible"><h1>'+item.title+'</h1>'
                        + '<p>'+item.body+'<br><small>'
                        + item.date+'</small></p></div>';

                        output.append(story).enhanceWithin();
                    });
                },
                error: function(){
                    output.text('There was an error loading the data.');
                }
            });

        });    
    </script>
    <div data-role="header" data-position="fixed">
        <h1>News</h1>
    </div>
    <div role="main" class="ui-content" id="news">
        <div data-role="collapsible">
            <h1>Hi</h1>
            <p>Am I collapsible?</p>
        </div>
    </div>
    <div data-role="footer" data-position="fixed"> 
        <h4>Footer content</h4> 
    </div>
</div>

这就是整个页面的内容。我会说，在我解决了这个问题之后，我的 Content-Security-Policy 开始出现错误，这是另一个问题，但它现在似乎可以正常工作，并且可以正常加载 ajax。

于 2017-05-09T09:03:44.293 回答