PhoneGap应用AJAX仅页面重载触发，首次加载不执行

我之前在PhoneGap项目里碰到过几乎一模一样的时序问题，刷新正常但首次加载AJAX没反应，给你几个亲测有效的排查和修复方向：

1. 确保代码在DeviceReady + DOM就绪后执行 #

PhoneGap的核心逻辑必须等deviceready事件触发后才能正常运行，同时还要保证DOM完全加载完成。你之前说试过DeviceReady，但可能写法不够严谨，试试把AJAX代码嵌套在双重监听里：

// 先监听设备就绪
document.addEventListener("deviceready", function() {
  // 再等DOM完全就绪
  $(document).ready(function() {
    // 带错误处理的AJAX请求，方便排查首次加载问题
    $.get("https://www.example.com/getPage.php?page=disclaimer", function(data){ 
      $("#info").append(data); 
    }).done(function() { 
      $('#ajax-loader').css('display','none'); 
    }).fail(function(jqXHR, textStatus, errorThrown) {
      console.log("AJAX加载失败：" + textStatus + " - " + errorThrown);
      $('#ajax-loader').css('display','none');
      $("#info").text("内容加载失败，请稍后重试。");
    });
  });
}, false);

2. 去掉custom.js的async属性 #

你的custom.js用了async异步加载，这会导致它的加载和执行时序不可控——首次加载时，你的AJAX脚本可能在custom.js（甚至jQuery）完全加载前就执行了，自然无法触发AJAX。把async去掉改成同步加载：

<script type="text/javascript" src="scripts/custom.js"></script>

3. 考虑UI框架的页面初始化事件 #

从你的HTML结构看，用了类似Framework7的UI框架，这类框架有自己的页面生命周期事件。如果页面是通过框架路由加载的，直接放在全局脚本里的AJAX可能会在页面未初始化完成时执行，试试监听框架的page:init事件（以Framework7为例）：

document.addEventListener("deviceready", function() {
  // 监听页面初始化事件
  $(document).on('page:init', function (e) {
    // 确认当前是免责声明页面再执行AJAX
    if (e.detail.page.el.id === 'page') { // 对应你的页面容器ID
      $.get("https://www.example.com/getPage.php?page=disclaimer&t=" + new Date().getTime(), function(data){ 
        $("#info").append(data); 
      }).done(function() { 
        $('#ajax-loader').css('display','none'); 
      }).fail(function(jqXHR, textStatus, errorThrown) {
        console.log("AJAX加载失败：" + textStatus + " - " + errorThrown);
        $('#ajax-loader').css('display','none');
        $("#info").text("内容加载失败，请稍后重试。");
      });
    }
  });
}, false);

4. 加时间戳避免缓存干扰 #

首次加载时可能浏览器或PhoneGap的WebView缓存了请求，导致AJAX没有实际发送。给请求URL加个时间戳参数，强制每次请求都是新的：

$.get("https://www.example.com/getPage.php?page=disclaimer&t=" + new Date().getTime(), function(data){ 
  $("#info").append(data); 
})

为什么刷新后正常？ #

刷新时浏览器已经缓存了jQuery、custom.js等静态资源，加载速度快很多，脚本执行时所有依赖都已经准备好，时序问题自然就消失了；但首次加载时资源加载慢，AJAX脚本执行时机不对，就会出现没反应的情况。

内容的提问来源于stack exchange，提问作者Enoch