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

将JSON值发送到URL

refresh json jquery javascript

Geoff_S · 技术社区 · 6 年前

我有一个JSON对象:

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

我正在尝试使用Javascript将'page'值加载到我的URL中,当它加载时,在'seconds'值中的秒数之后,刷新页面。

当我点击链接时 <a href="testpage.php?screen=1"></a> 我不想网址只是 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页有两个元素,那么它就不工作了。

我想在第一页显示元素,在间隔之后显示下一个元素

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>

2 回复 | 直到 6 年前

Barmar 0___________ 6 年前

您需要将新的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);

Ronit Mukherjee 6 年前

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

下面的代码是在我的记忆中编写的,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>