如何基于URL刷新XSLTForms模型实现无页面重载分页？

当然可以实现无需HTTP重载页面的分页更新，下面提供两种适配你现有XForms+PHP架构的方案：

方案一：使用XForms原生特性（推荐） #

利用XForms的<xf:load>或提交机制，直接更新数据实例而不刷新整个页面，步骤如下：

1. 修改模型，增加页码跟踪实例 #

在现有<xf:model>中添加一个用于记录当前页码的实例，并确保主数据实例可被动态替换：

<xf:model>
    <!-- 跟踪当前页码的实例 -->
    <xf:instance id="page-tracker">
        <page><?=$p?></page>
    </xf:instance>
    <!-- 主数据实例，初始加载对应页码数据 -->
    <xf:instance id="video-data" src="data.php?p=<?=$p?>"/>
    <!-- 绑定页码为整数类型，避免非法值 -->
    <xf:bind ref="instance('page-tracker')/page" type="integer"/>
</xf:model>

2. 添加分页控制按钮 #

在页面中加入上一页/下一页按钮，通过XForms动作更新页码并刷新数据实例：

<xf:group ref="instance('page-tracker')">
    <!-- 上一页按钮 -->
    <xf:button>
        <xf:label>上一页</xf:label>
        <xf:action ev:event="DOMActivate">
            <!-- 确保页码不小于1 -->
            <xf:setvalue ref="page" value="if (page > 1) then page - 1 else 1"/>
            <!-- 加载新页码的数据到主实例 -->
            <xf:load resource="data.php?p={page}" replace="instance" target="video-data"/>
        </xf:action>
    </xf:button>

    <!-- 当前页码显示 -->
    <xf:output value="page" class="current-page"/>

    <!-- 下一页按钮 -->
    <xf:button>
        <xf:label>下一页</xf:label>
        <xf:action ev:event="DOMActivate">
            <!-- 若已知总页数，可添加上限判断，例如：if (page < 总页数) then page +1 else page -->
            <xf:setvalue ref="page" value="page + 1"/>
            <xf:load resource="data.php?p={page}" replace="instance" target="video-data"/>
        </xf:action>
    </xf:button>
</xf:group>

这种方案完全基于XForms规范，无需额外JavaScript，兼容性取决于你使用的XForms处理器（如Orbeon、XSLTForms等）。

方案二：JavaScript+AJAX实现 #

如果你的XForms处理器对原生动态实例加载支持有限，可通过AJAX手动获取数据并更新页面：

1. 添加分页按钮与页码显示 #

在页面中插入控制元素：

<button onclick="loadVideoPage(currentPage - 1)">上一页</button>
<span id="current-page"><?=$p?></span>
<button onclick="loadVideoPage(currentPage + 1)">下一页</button>

2. 编写AJAX加载逻辑 #

添加JavaScript代码处理数据请求与页面更新：

// 初始化当前页码
let currentPage = <?=$p?>;

function loadVideoPage(page) {
    if (page < 1) return; // 禁止页码小于1

    // 发送请求获取对应页码的XML数据
    fetch(`data.php?p=${page}`)
        .then(response => response.text())
        .then(xmlStr => {
            const parser = new DOMParser();
            const newData = parser.parseFromString(xmlStr, "application/xml");
            
            // 获取XForms主数据实例
            const model = document.querySelector('xf\\:model, model');
            const dataInstance = model.querySelector('xf\\:instance[id="video-data"], instance[id="video-data"]');
            
            // 替换实例内容
            while (dataInstance.firstChild) {
                dataInstance.removeChild(dataInstance.firstChild);
            }
            dataInstance.appendChild(document.importNode(newData.documentElement, true));
            
            // 更新页码显示
            currentPage = page;
            document.getElementById('current-page').textContent = page;
            
            // 触发XForms刷新以更新列表
            if (typeof XForms !== 'undefined' && XForms.refresh) {
                XForms.refresh();
            } else {
                // 部分处理器需触发自定义事件
                document.dispatchEvent(new Event('xforms-refresh'));
            }
        })
        .catch(err => console.error('加载数据失败:', err));
}

注意事项 #

• 你的data.php脚本无需修改，它已经能根据p参数返回对应页码的XML数据。
• 若使用方案二，需确保XForms处理器允许手动实例更新后触发界面刷新，不同处理器的API可能略有差异。

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