将 JSON 值发送到 URL

Question

我有一个 JSON 对象：

[{"page":"Test",
    "seconds":"56",
}]

我正在尝试使用 Javascript 在加载时将“页面”值加载到我的 URL 中，并且在“秒”值中的秒数之后，刷新页面。

当我单击链接 <a href="testpage.php?screen=1"></a> 时，我不希望 URL 只是 testpage.php?screen=1，但我希望页面加载立即将 'page' 的值附加到 URL，如下所示：

testpage.php?screen=1&page=Test

这是我目前的脚本：

<script type="text/javascript">
let obj = <?php echo $object; ?>;//This is my JSON object, already encoded and parsed

let params = new URL(document.location).searchParams;
params.set("page", obj[0].page);

window.setTimeout(function () {
    window.location.href = /*not sure here*/;
}, obj.seconds * 1000);

</script>

非常感谢您对完成此脚本的任何帮助，我只是不确定如何完成此脚本以执行适当的功能。

更新：

尝试根据间隔显示和隐藏内容

如果我的 JSON 包含具有一个页面 ID 的元素，那么这可以正常工作，但如果第 1 页有 2 个元素，第 2 页有 2 个元素，则它不起作用。

我想显示第一页的元素，间隔后显示下一个元素

let obj = [{
    "pageID": "93",
    "page_type_id": "2",
    "display_id": "2",
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "86",
    "panel_type_id": "2",
    "cont_id": "138",
    "contID": "138",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nLeft 93<\/p>\r\n<\/body>\r\n<\/html>"
  },
  {
    "pageID": "93",
    "page_type_id": "2",
    "display_id": "2",
    "slide_order": null,
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "87",
    "panel_type_id": "3",
    "cont_id": "139",
    "contID": "139",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nRight 93<\/p>\r\n<\/body>\r\n<\/html>"
  },
{
    "pageID": "94",
    "page_type_id": "2",
    "display_id": "2",
    "slide_order": null,
    "duration": "75",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "88",
    "panel_type_id": "3",
    "cont_id": "140",
    "contID": "140",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nRight New<\/p>\r\n<\/body>\r\n<\/html>"
  }
];
let counter = 0;

var fullContent = document.getElementById('fullContent');
var leftContent = document.getElementById('leftContent');
var rightContent = document.getElementById('rightContent');

var fullColumn = document.getElementById('fullColumn');
var leftColumn = document.getElementById('leftColumn');
var rightColumn = document.getElementById('rightColumn');



setInterval(() => {
  const currentJSONobject = obj[counter];

  if (currentJSONobject.page_type_id == 1) {

    leftColumn.style.display = "none";
    rightColumn.style.display = "none";
    

    if (currentJSONobject.panel_type_id == 1) {

      fullContent.innerHTML = currentJSONobject.content;
    }

    //If half page    
  } else if (currentJSONobject.page_type_id == 2) {

    fullColumn.style.display = "none";


    if (currentJSONobject.panel_type_id == 2) {

      leftContent.innerHTML = currentJSONobject.content;

    } else if (currentJSONobject.panel_type_id == 3) {

      rightContent.innerHTML = currentJSONobject.content;
    }
  }

  $('#middle').css('background-image', 'url(' + currentJSONobject.background_img + ')');

  counter += 1;
  if (counter === obj.length) {
    counter = 0;
  }

}, 1500)
console.log(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row middle">
  <!-- Full Page Divs -->
  <div class="col-lg-12" id="fullColumn">
    <div class="fullContent" id="fullContent" style="height: 100%; ">
    </div>
  </div>
  <!-- End Full Page Divs -->

  <!-- Half Page Divs -->
  <div class="col-lg-6 leftColumn">

    <div class="leftContent" id="leftContent" style=" height: 100%; ">

    </div>
  </div>

  <div class="col-lg-6 rightColumn">

    <div class="rightContent" id="rightContent" style=" height: 100%; ">

    </div>

  </div>
  <!-- End Half Page Divs -->
</div>

Answer 1

您需要将新的 URL 对象保存在一个变量中，以便您可以对其进行整体修改。

let newUrl = new URL(document.location);
newUrl.searchParams.set("page", obj[0].page);
window.setTimeout(function() {
    window.location.href = newUrl.href;
}, obj[0].seconds * 1000);

Answer 2

我希望下面的代码对你有用。

以下代码的编写牢记，obj 数组的最后一个元素将用于重新加载。

<?php //testpage.php
    $arr = array(
        array("page"=>"Test","seconds"=>2),
        array("page"=>"Dummy","seconds"=>3),
    );

    $object = json_encode($arr);
?>
<h1>This is test page </h1>

<script type="text/javascript">
    function reloadPage() {
        var obj = <?php echo $object?>;
        alert("Page is going to reload in "+obj[obj.length-1].seconds+" seconds");
        let newUrl = new URL(document.location);
        newUrl.searchParams.set("page", obj[obj.length-1].page);
        window.setTimeout(function() {
        window.location.href = newUrl.href;
        }, obj[obj.length-1].seconds * 1000);
    }

    var url = new URL(document.location);
    if(!url.searchParams.get("page")){
        window.addEventListener('load', reloadPage, false );
    }
</script>