为什么在不被调用时添加

Question

我编写了要构建的购物车JavaScript代码，但是即使不单击它，该代码也会运行：

function addProduct(prodId) {
  var sessionDivId = document.getElementById(prodId);
  if (prodId) {
    sessionDivId.innerHTML = '<?= $_SESSION['product_id_1']+=1 ?>';
  }
}

<div onclick="addProduct('testSession1');">ADD</div>
<div id="testSession1"></div>

每次刷新网站时，即使不单击“添加”按钮，它也会在会话testSession1添加1 。

Answer 1

用户加载页面之前，您的PHP逻辑将在服务器上运行。 要添加产品，您需要将其存储在其他位置（因为PHP不再具有将+ = 1放入购物车的控件）。

我会提出AJAX请求，将产品ID发布到用户购物车：

function addProduct(prodId) {
    // using jQuery for simplicity of writing
    $.ajax({
        type: "POST",
        url: "/cart/item/" + prodId,         // or other backend API endpoint
        success: displayNiceUserMessage()
    });
 }

当然还有一些错误处理，以防万一出现问题。

更新资料

我看到您不想使用Ajax。 请注意，它不需要比我上面编写的代码更复杂。 然后在后端，如果任何用户向该URL发出POST请求，则只需向会话添加+1。

但是，如果您不希望使用ajax，则在单击添加按钮时需要重新加载页面。 就像在评论中说的那样，在“添加”按钮周围放置一个类型为post的形式（并带有一个很好的URL，以使您的服务器知道这是发生了添加项事件），然后将“添加”按钮设为一种提交类型。 然后，根本不需要JavaScript。