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