如何不刷新PHP代码中的页面

Question

我正在建立购物车。 我基本上为每个产品使用一个item_id来保存每个购物车的值。 由于我正在调用新的index.php，因此每当我从购物车中添加/删除商品时，它始终移至页面顶部。

我试图将滚动位置保存为变量，然后将屏幕移至上一个scrollPos，但是它没有用....（都没有调用#names）。

有谁知道如何不刷新页面来解决此问题？

这是我的代码

<?php

session_start();

$page = 'index.php'; 
$con = mysqli_connect('localhost','root','0801','mystore') ;
mysqli_select_db($con,'mystore') ;

#for adding, removing, deleting the products from the cart
if(isset($_GET["add"])){ //same name with cart.php?add <--
 $_SESSION['cart_'.(int)$_GET["add"]] += 1;
echo '<script>window.location="index.php"; window.scrollTo(0,1200);</script>';
}

if(isset($_GET['remove'])){
  $_SESSION['cart_'.(int)$_GET['remove']] -- ;
  header("Location: ".$page);
}

if(isset($_GET['delete'])){
  $_SESSION['cart_'.(int)$_GET['delete']] = 0 ;
  header('Location: '.$page);
}

#function for displaying products
function product(){
  global $con;
  $get = mysqli_query($con, 'SELECT * FROM inventory ORDER BY id ASC');

  if (mysqli_num_rows($get) == 0){
    echo("There are no products to display");
  } else {
    while ($get_row = mysqli_fetch_assoc($get)){
    echo '<br /><img src="images/products/'.$get_row['image'].'" width=100px;>';
    echo '<br>'.$get_row['name'].'<br /> &dollar;'.number_format($get_row['price'],2);

echo '<br> <a href="cart.php?add='.$get_row['id'].'">Add To Cart</a>  
    }
  }
} #end of function


# function for display cart
function cart(){
  foreach ($_SESSION as $key => $value) { 
    if ($value > 0){
      if(substr($key, 0 , 5) =='cart_'){
        global $con; //DON'T FORGET TO ADD THIS!!!
        $id = substr($key, 5, (strlen($key)-5)); //take out the string part 
        $partid = mysqli_real_escape_string($con, $id); 
        $get = mysqli_query($con,'SELECT * FROM inventory WHERE id='.(int)$partid);

        while($get_row = mysqli_fetch_assoc($get)){
            $subTotal = $get_row['price'] * $value;
            echo '<br /><img src="images/products/'.$get_row['image'].'" width=30px;>';
            echo $get_row['name'].' x '.$value.' @ &dollar;'.number_format($get_row['price'], 2);
            echo ' = &dollar;'.number_format($subTotal,2);
            echo '<a href="cart.php?remove='.$id.'"> [-] </a> <a href="cart.php?add='.$id.'">[+]</a> <a href="cart.php?delete='.$id.'"> [delete] </a><br />';
        }
      }
      $total += $subTotal;
    }
  }
    if ($total ==0 ){
      echo "Your cart is empty";
    } else {
      echo '<p /> TOTAL: &dollar;'.number_format($total, 2);
    }
}

print_r($_SESSION);

?>

Answer 1

考虑使用jQuery Ajax调用从购物车中添加/删除商品。 这样做不需要重新加载页面。

Answer 2

您可以使用会话存储来存储位置，然后在重新加载页面时返回该位置，如下所示：

jQuery的：

$(window).scroll(function() {
  sessionStorage.scrollTop = $(this).scrollTop();
});

$(document).ready(function() {
  if (sessionStorage.scrollTop != "undefined") {
    $(window).scrollTop(sessionStorage.scrollTop);
  }
});

或使用Cookie的JavaScript代码，例如：

JavaScript的：

<script>
    cookieName="page_scroll"
    expdays=365

    function setCookie(name, value, expires, path, domain, secure){
    if (!expires){expires = new Date()}
    document.cookie = name + "=" + escape(value) + 
    ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
    ((path == null) ? "" : "; path=" + path) +
    ((domain == null) ? "" : "; domain=" + domain) +
    ((secure == null) ? "" : "; secure")
    }

    function getCookie(name) {
    var arg = name + "="
    var alen = arg.length
    var clen = document.cookie.length
    var i = 0
    while (i < clen) {
    var j = i + alen
    if (document.cookie.substring(i, j) == arg){
    return getCookieVal(j)
    }
    i = document.cookie.indexOf(" ", i) + 1
    if (i == 0) break
    }
    return null
    }

    function getCookieVal(offset){
    var endstr = document.cookie.indexOf (";", offset)
    if (endstr == -1)
    endstr = document.cookie.length
    return unescape(document.cookie.substring(offset, endstr))
    }

    function deleteCookie(name,path,domain){
    document.cookie = name + "=" +
    ((path == null) ? "" : "; path=" + path) +
    ((domain == null) ? "" : "; domain=" + domain) +
    "; expires=Thu, 01-Jan-00 00:00:01 GMT"
    }

    function saveScroll(){ // added function
    var expdate = new Date ()
    expdate.setTime (expdate.getTime() + (expdays*24*60*60*1000)); // expiry date

    var x = (document.pageXOffset?document.pageXOffset:document.body.scrollLeft)
    var y = (document.pageYOffset?document.pageYOffset:document.body.scrollTop)
    Data=x + "_" + y
    setCookie(cookieName,Data,expdate)
    }

    function loadScroll(){ // added function
    inf=getCookie(cookieName)
    if(!inf){return}
    var ar = inf.split("_")
    if(ar.length == 2){
    window.scrollTo(parseInt(ar[0]), parseInt(ar[1]))
    }
    }
<script>

HTML：

<body onload="loadScroll()" onunload="saveScroll()" >