刷新html页面的一部分(弹出窗口)

时间:2018-01-28 17:20:39

标签: javascript php html cookies

我见过类似的问题,但没有适用于我的解决方案。

当我点击html中的按钮时,会设置一个cookie,比如说cookie_zero。

然后,根据此cookie,cookie_zero,读取另一个cookie,cookie_one。

但是,页面需要刷新才能获得更新的cookie。

是否有方法只刷新HTML页面的一部分?它可以是下面的代码" POPUP SETUP":

Lots of HTML . . .

<!-- POPUP SETUP -->

<div id="popup" class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <h2 id="popup-headline"></h2>

        <p id="question"><?php echo $_COOKIE['cookie_one']; ?></p>

        <p id="answer"><?php echo $_COOKIE['cookie_two']; ?></p>

        <p class="popup-small-button"><a data-popup-close="popup-1" href="#"><br>Close</a></p>

        <a class="popup-close" data-popup-close="popup-1" href="#">x</a>

    </div>

</div>

1 个答案:

答案 0 :(得分:0)

是的,我可以帮忙!您只需要使用HTTP GET请求。见下面的方法。

这有效......

<?php
// Test.php
setcookie("cookie_zero", 1);
?>

<!-- button -->
<button data-click="set_cookie">Set cookie</button>

<!-- html body for live  feed -->
<div data-feed-for="set_cookie">

</div>

<!-- Javascript -->
<script>

let clickbtn = document.querySelector("*[data-click='set_cookie']");
let feedfor = document.querySelector("*[data-feed-for='set_cookie']");

let http = (window.ActiveXObject) ? new window.ActiveXObject("XMLHTTP.Microsoft") : new XMLHttpRequest();

let set_cookie = function(){
    http.open("GET", 'test2.php', true);
    http.onreadystatechange = function()
    {
        if(http.readyState == 4 && http.status == 200)
        {
            // Response in json
            var response = JSON.parse(http.response);
            // Feed screen
            feedfor.innerHTML = response.cookie_one;
        }
    }
    http.send(null);

}

clickbtn.addEventListener("click", function(s){
    set_cookie();
});

现在创建一个处理cookie的php文件

<?php

// test2.php
setcookie("cookie_zero", mt_rand(10,500));

$cookies['cookie_one'] = $_COOKIE['cookie_zero'];

echo json_encode($cookies);

?>

现在运行。它工作正常 您应该注意,您无法重新加载HTML文档的特定部分。

干杯。

Josesphi