修改

Question

我遇到了一个问题，我尝试了所有谷歌的答案，没有做任何事情。特别是因为我喜欢在可能的情况下做一个纯JavaScript解决方案...我有一个带推车的菜单。此菜单显示如下：您的购物车（0）其中0是购物车内的商品数量。项目编号是从SQL表'cart'查询，我在其中保存添加到购物车的所有用户产品。因此，当会议结束时，他们不会丢失购物车上的物品。但我想在每次在购物车内添加内容时更新此菜单范围，而无需刷新页面。这些项目正在以这种方式添加：

在显示产品的表格中，我有：

<td id="add'.htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8').'"> <label><a href="javascript:addtocart('.htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8').')"><b><img src="/img/cart.gif" /></b></a></label> </td>

所以我调用javascript：addtocart将产品的'id'作为参数传递。这个功能确实：

function addtocart(id)
{
    document.getElementById('add'+id).innerHTML='<b>On your cart!</b>';
    load('/index.php?addtocart&id='+id);
}

好的，功能加载确实：

function load(url) {
var xmlhttp;

if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        eval( xmlhttp.responseText );
    }
}

xmlhttp.open('GET', url, true);
xmlhttp.send();
}

好的，所以我们让我的index.php接收带有要添加到购物车的产品ID的GET，我在index.php上做：

if (isset($_GET['addtocart']) && isset($_GET['id']))
{
    $id = mysql_real_escape_string($_GET['id']);
    mysql_query("INSERT INTO cart VALUES('$id', '$userid')");           
}

这非常有效，如果我刷新页面，在菜单中我会得到“你的购物车（1）”......但是当客户点击桌子时如何自动刷新？可以用纯javascript函数吗？

//编辑index.php内容：

<?php
    include("./includes/header.php");
    include("./includes/db.php");
?>
<html>
<head>
    <link rel="stylesheet" href="./css/style.css">
    <title>MyShop</title>
    <script type="text/javascript">

    function load(url) {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
           document.getElementById('cart').innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open('GET', url, true);
    xmlhttp.send();
    }

    function addtocart(id)
    {
        document.getElementById('add'+id).innerHTML='<b>On your cart!</b>';
        load('/index.php?addtocart&id='+id);
    }
    </script>
</head>
<body id="home">
    <?php include 'menu.php'; ?>
    <div id="container">
        <?php 
            if (isset($_GET['news']))
            {
                include 'news.php';         
            }
            else if (isset($_GET['orders']))
            {
                include 'orders.php';           
            }
            else if (isset($_GET['addtocart']) && isset($_GET['id']))
            {
                $id = mysql_real_escape_string($_GET['id']);
                mysql_query("INSERT INTO cart VALUES('$id', '$userid')");           
            }
        ?>
    </div>
</body>
</html>

Answer 1

在index.php页面中，返回为当前用户插入的产品数量，然后使用ajax调用的成功处理程序更新范围。

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // here get the number of products inserted and display in span
        document.getElementById('span_id').innerHTML = xmlhttp.responseText;
    }
}

修改

不要对同一页面进行ajax调用。将id发送到其他页面，让我们说abc.php。然后在update_cart_ajax.php页面中仅保留与php相关的代码。

所以你的addtocart()变为：

function addtocart(id)
{
    document.getElementById('add'+id).innerHTML='<b>On your cart!</b>';
    load('/update_cart_ajax.php?addtocart&id='+id);
}

update_cart_ajax.php

<?php          
include("./includes/db.php");
if (isset($_GET['addtocart']) && isset($_GET['id']))
{
   $id = mysql_real_escape_string($_GET['id']);
   mysql_query("INSERT INTO cart VALUES('$id', '$userid')");           
}
else
{
    echo 0;
    exit;
}
// get the number of products added to the cart for the current user
$total_products_in_cart = <value returned from db>;
echo $total_products_in_cart;
exit;

自动刷新SPAN内容

1 个答案:

修改

update_cart_ajax.php