代码之家 › 专栏 › 技术社区 › Geoff_S

通过将JSON值附加到URL并按间隔刷新来循环页面URL

json php javascript

Geoff_S · 技术社区 · 6 年前

我正在尝试让我的CMS站点将页面ID附加到我的静态URL中,并使用JavaScript或者Ajax循环访问它们。

如果单击“显示3”,现在的URL是 http://local.CMSTest.com/showDisplay.php?display=3 这正是我从上一页的链接所期望的。

我正试图改变我一直使用的数组来严格使用JSON,我想使用JavaScript来设置URL,在一段时间后,刷新页面到下一个URL。

下面是我当前数组的每个返回结果的JSON打印,它是两页。

所以在这种情况下,我想在页面加载时 1。将第一个对象的pageID附加到看起来像 http://local.CMSTest.com/showDisplay.php?display=3&pageID=104 2。使用第一个JSON对象的其他元素(panel_type_id、content等)填充HTML 三。使用JSON的持续时间(秒)来设置间隔 4。当该时间结束时,刷新页面,现在追加下一个pageid http://local.CMSTest.com/showDisplay.php?display=3&pageID=116 等等,在一个循环中。

当前的javascript打印了我希望在控制台中成为下一个URL的内容,但我希望它将第一个数组/json结果的pageid附加到当前活动的URL,而不是,它只是显示 ?diplay=3 . 所以我觉得它在正确的轨道上,但我错过了一些东西

下面是JSON结构:

{pageID: "104", page_type_id: "1", display_id: "3", slide_order: null, duration: "54", â¦}
active:"1"
background_img:"images/BG_spring.svg"
contID:"165"
cont_id:"165"
content:"<!DOCTYPE html>âµ<html>âµ<head>âµ</head>âµ<body>âµ<p>This is the first page</p>âµ</body>âµ</html>"
display_id:"3"
duration:"54"
pageID:"104"
page_id:"104"
page_type_id:"1"
panel_id:"114"
panel_type_id:"1"

{pageID: "116", page_type_id: "1", display_id: "3", slide_order: null, duration: "54", â¦}
active:"1"
background_img:"images/BG_spring.svg"
contID:"166"
cont_id:"166"
content:"<!DOCTYPE html>âµ<html>âµ<head>âµ</head>âµ<body>âµ<p>This is the second page</p>âµ</body>âµ</html>"
display_id:"3"
duration:"54"
pageID:"116"
page_id:"116"
page_type_id:"1"
panel_id:"113"
panel_type_id:"1"

当前HTML

<?php foreach($showDisplayResult as $showDisplays): ?>
    <?php if($showDisplays['page_type_id'] == 1){ ?>

        <?php //print_r($showDisplays);?>
        <div class="row top">
            <?php include 'banner.php'?>
        </div>

        <div class="row middle" style="background-image: url(<?php echo $showDisplays['background_img']?>);">
            <div class="col-lg-12">
                <?if($showDisplays['panel_type_id'] == 1){?>
                <div class="fullContent" style="/*background-color: rgba(255, 255, 255, 0.5);*/ height: 100%; ">
                <?php echo $showDisplays['content']?>
                </div>
                <?}?>
            </div>
        </div>

        <div class="row bottom">
            <?php include 'ticker.php';?>
        </div>

    <?php }?> 
<?php endforeach?>

和javascript:

<script type="text/javascript">
function setDisplay() {
  let params = new URL(document.location).searchParams;
  let pageID = params.get("pageID");
  let disply = params.get("display");
  // set the html based on pageID and display
}

function getNextURL() {
  // encode your php array to json
  let obj = <?php echo json_encode($showDisplays); ?>;

  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();
  console.log(nextURL);
  console.log(obj);
  return nextURL
}

getNextURL();
</script>

1 回复 | 直到 6 年前

Simon K 6 年前

window.location.href = getNextUrl();

getNextURL

// encode your php array to json
let obj = <?php echo json_encode($showDisplays); ?>;

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);

* 1000

obj.duration