Отправить значение JSON в URL
У меня есть объект JSON:
[{"page":"Test",
"seconds":"56",
}]
И я пытаюсь использовать Javascript для загрузки значения 'page' в свой URL-адрес, когда он загружается, и после количества секунд в значении 'seconds' обновляю страницу.
Когда я нажимаю ссылку <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 есть элементы с одним идентификатором страницы, это работает нормально, но если есть 2 элемента для страницы 1 и 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.info(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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам необходимо сохранить новый объект 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);
Надеюсь, следующий код вам подойдет.
Следующий код был написан с учетом того, что последний элемент массива 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>
@TomN. Я тестировал этот код в своей локальной системе, у меня он работал нормально. Не стесняйтесь протестировать его, и, в случае возникновения каких-либо проблем, не стесняйтесь связаться со мной по адресу [email protected].
Спасибо, я думаю, это работает, за исключением того, что при загрузке страницы ничего не добавляется. Я пытаюсь сделать это там, где я могу масштабировать его дальше, но если я перейду по ссылке, указанной в моем вопросе выше, она ничего не добавит к URL-адресу до обновления. Я бы хотел, чтобы он сразу добавлялся при загрузке первой страницы, а затем обновлялся, чтобы выполнить тот же процесс.
Спасибо, я скоро смогу протестировать 5his. Сможете ли вы сделать это на скрипке?