为什么我的 PhoneGap 页面需要重新加载才能激活 ajax 方法？答案

【问题标题】：Why does my PhoneGap page require a reload in order to activate the ajax method?为什么我的 PhoneGap 页面需要重新加载才能激活 ajax 方法？
【发布时间】：2017-05-09 01:26:00
【问题描述】：

我是一名资深程序员，但对整个手机应用程序编程并不熟悉，并且刚刚深入研究了 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 不会执行？提前致谢。

【问题讨论】：

当使用cordova 或phonegap 时请使用'deviceready' 而不是jquery ready 事件两者是不同的。 document.addEventListener('deviceready', this.onDeviceReady, false);或 $(document).on("deviceready")
新闻页面仍然需要刷新才能让 ajax 开始工作。所以 deviceready 并没有帮助解决我的问题。
值得一试：将您的 ajax 调用放在 JQM pagecreate 事件中，或者如果您需要在每次页面访问时刷新，请在 pageshow 中：jQuery Mobile “Page” Events – What, Why, Where, When & How?
@deblocker ，不，这也没有帮助。
建议在所有页面的head内加载所有JS，并通过页面容器事件控制它们，正如@deblocker提到的那样。如果你仍然不想这样做，请将你的 JS 放在页面 div 中。

标签： android cordova jquery-mobile phonegap

【解决方案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。

【讨论】：

只是一个小提示：JQM 通过查看data-role="page" 来管理divvisibility。所以 - 可能是 - 你会遇到双重 id="home" 的问题。或者查看data-rel external 的文档 - 看看吧。