javascript - 通过附加 URL 参数来循环 URL

Question

我正在尝试设置一个静态页面，用于通过“URL”而不是传统方式旋转的显示。现在，页面加载时我的 URL 是 localcms.com/showDisplay.php?display=3 因为加载页面的链接将 display 的值传递为 3。什么我想要用我的 javascript 做的是让初始页面加载将第一个 JSON 元素的 pageID 放入 URL，如 localcms.com/showDisplay.php?display=3&pageID=104 然后在持续时间(也是来自 JSON 的值)之后旋转到下一个并将下一个 JSON 元素的 pageID 放入 URL localcms.com/showDisplay.php?display=3&pageID=116 中。

问题是，我的初始页面加载只有通过 ?display=3 传递的链接，并且我无法让 javascript 正确访问 JSON，因此每当我访问 localcms 时.com/showDisplay.php?display=3 它会自动附加第一个 pageID，在该元素的持续时间内停留在该页面上，然后转到下一个页面。

在我的页面正文中，我有:

<?php while($row = mysqli_fetch_assoc($showDisplayResult)){
echo json_encode($row, JSON_PRETTY_PRINT);
}?>

WHich 从我的主查询中提取，并以 JSON 格式打印我从该查询中获得的 2 条记录:

{ "pageID": "104", 
    "page_type_id": "1", 
    "display_id": "3", 
    "slide_order": null, 
    "duration": "56", 
    "active": "1", 
    "background_img": null, 
    "panel_id": "96", 
    "panel_type_id": "1", 
    "page_id": "104", 
    "cont_id": "148", 
    "contID": "148",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nThis is full content<\/p>\r\n<\/body>\r\n<\/html>" }
{ "pageID": "116", 
    "page_type_id": "1", 
    "display_id": "3", 
    "slide_order": null, 
    "duration": "54", 
    "active": "1", 
    "background_img": "images\/BG_spring.svg", 
    "panel_id": "113", 
    "panel_type_id": "1", 
    "page_id": "116", 
    "cont_id": "165", 
    "contID": "165", 
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nThis background should be green<\/p>\r\n<\/body>\r\n<\/html>" }

这是我的 JavaScript:

<script type="text/javascript">
    // encode your php array to json
let obj = <?php echo json_encode($row); ?>;

let params = new URL(document.location).searchParams;
params.set("pageID", obj.pageID);
params.set("display", obj.display_id);

let url = window.location.href.split('?')[0];
let nextURL = url + "?" + params.toString();
window.setTimeout(function () {
    window.location.href = nextURL;
}, obj.duration * 1000);

console.log(obj);
</script>

如何正确访问 JSON 并在脚本中正确使用它？

更新:

使用这个

<?php
// $row = '{ "pageID": "104", 
//     "page_type_id": "1", 
//     "display_id": "3", 
//     "slide_order": null, 
//     "duration": "56", 
//     "active": "1", 
//     "background_img": null, 
//     "panel_id": "96", 
//     "panel_type_id": "1", 
//     "page_id": "104", 
//     "cont_id": "148", 
//     "contID": "148",
//     "content": "\r\n\r\n\r\n<\/head>\r\n\r\nThis is full content<\/p>\r\n<\/body>\r\n<\/html>" }
// ';

$row = mysql_fetch_assoc($showDisplayResult);
?>


</div>
<script type="text/javascript">
    // encode your php array to json
    let obj = <?php echo json_encode($row); ?>;

    obj = JSON.parse(obj);

    let params = new URL(document.location).searchParams;
    params.set("pageID", obj.pageID);
    params.set("display", obj.display_id);
    let url = window.location.href.split('?')[0];
    let nextURL = url + "?" + params.toString();
    window.setTimeout(function () {
        window.location.href = nextURL;
    }, obj.duration * 1000);

    console.log(obj);
</script>

我在控制台中得到了这个

如果我注释掉当前行并取消注释硬编码数组，它会在控制台中加载正确的对象，但最初不会将 pageID 附加到 URL

Answer 1

修改您的代码:

<?php
$row = '{ "pageID": "104", 
    "page_type_id": "1", 
    "display_id": "3", 
    "slide_order": null, 
    "duration": "56", 
    "active": "1", 
    "background_img": null, 
    "panel_id": "96", 
    "panel_type_id": "1", 
    "page_id": "104", 
    "cont_id": "148", 
    "contID": "148",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nThis is full content<\/p>\r\n<\/body>\r\n<\/html>" }
';
?>
<script type="text/javascript">
    // encode your php array to json
    let obj = <?php echo json_encode($row); ?>;

    obj = JSON.parse(obj);

    let params = new URL(document.location).searchParams;
    params.set("pageID", obj.pageID);
    params.set("display", obj.display_id);
    let url = window.location.href.split('?')[0];
    let nextURL = url + "?" + params.toString();
    window.setTimeout(function () {
        window.location.href = nextURL;
    }, obj.duration * 1000);

    console.log(obj);
</script>

工作正常。