php - AJAX/本地存储 : Is it possible to pass a JS variable to PHP?

Question

我想知道，存放购物车的最佳方式是什么？
我考虑过将产品 ID 存储在 localstorage/sessionstorage 中，然后使用 AJAX 从服务器检索产品。
唯一的问题是我不知道如何将项目从本地存储传递到 PHP...
我猜这可能是不可能直接实现的，虽然我不知道如何实现它，但我想到了一种形式......
这个想法是，当用户单击“添加到购物车”时，商品 ID 和数量将添加到本地存储中，当用户查看他的购物车时，商品详细信息(图片、名称、价格...)将从数据库。我可能会使用这个教程
http://verido.dk/index.php/ressourcer/artikler/loading-and-saving-data-dynamically-using-php-jquery-and-mysql/

我也可以放弃本地存储并使用 session 和数据库，但我真的很想为用户提供动态网络体验。

我刚刚想出的另一种可能的方法是使用像 file.php?prodid=...... 这样的 URL，尽管这样的 URL 可能会变得太长。

提前致谢!

Answer 1

'您必须记住，在将代码转换为浏览器端代码之前，先读取服务器端 (PHP) 代码。 JavaScript 在浏览器端被操纵...

所以从一维的 Angular 来看，您不能将 JavaScript 传递给 PHP。

然而...

使用 Ajax，对于您的情况，我建议您使用 JSON 将 JavaScript 数据发送到 PHP 页面，并将响应返回给您的 JavaScript 方法。我认为这将满足您的需求。如果你愿意，我可以提供一个简单的例子。

//--示例如下:

JavaScript:

//Ajax Method
function processAjax(queryString, processDiv, responseDiv) {

responseDiv.innerHTML = '';
var myAjax;
try {
    // Modern Browsers-->
    myAjax =new XMLHttpRequest();
} catch (e) {
    // antique ie browsers-->
    try {
        myAjax =new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            myAjax =new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            // Something went wrong
            document.getElementById('processDiv').innerHTML="";
            alert("Your browser malfunctioned!  Please try again. Consider installing a modern browser if the problem persists.");
            return false;
        }
    }
}
myAjax.onreadystatechange = function() {
    if (myAjax.readyState == 4) {
        var ajaxResponse = myAjax.responseText;
                responseDiv.innerHTML = ajaxResponse;
        processDiv.innerHTML = "";

                    //NOTE: HERE IS WHERE AJAX IS FINISHED, SO IF YOU WANT TO DO SOMETHING ELSE HERE YOU CAN!
                    //POST PROCESSING----->
                    // IE: alert('I am finished processing now!');
                    // or call another function:
                    // anotherFunction();

            } else {
        processDiv.innerHTML = '<img src="http://www.mysite.com/images/loadingicon.gif" alt="processing....." />';
    }
}
myAjax.open("GET", queryString, true);
myAjax.send(null);

}


function sendStorage() {

   var helloVar = 'Hello, I am passed to PHP #1';
   var worldVar = 'I am the second value passed to PHP!';
   var processId = 'process_div';
   var resultId = 'result_div';
   var queryString = 'http://www.mysite.com/process.php?hello=' + helloVar + '&world=' + worldVar;

   processAjax(queryString, processId, resultId);

}

现在是一些 HTML:

<div id="content">
       <div id="process_div"> This is where processing will occur </div>
       <div id="result_div"> This is where my response will display </div>
</div>

现在是 process.php(注意:为了安全起见，我强烈建议您不要在您的 JavaScript 中显示服务器端处理页面)

<?php

  //init
  $hello = '';
  $world = '';
  $errors = 0;

  //set
  //Security note: never trust a URL request.. you should clean all $_GET, $_REQUEST, AND $_POST with the PHP htmlspecialchars() method (take a look at php.net for that)
  (isset($_GET['hello'])) ? $hello = $_GET['hello'] : $errors++;
  (isset($_GET['world'])) ? $world = $_GET['world'] : $errors++;

  //process
  if($errors > 0) {
      echo 'Errors Detected! Missing querystring get data!';
  } else {
      echo '<p>Hello received: ' . $hello . '</p>';
      echo '<p>World received: ' . $world . '</p>';
      //now we can process $hello and $world server side!
  }

?>

重要提示:您应该认真学习一些 JSON 和 $_POST 请求，因为它们更安全、速度更快，并且您可以轻松操作返回的数据。我建议查看像 jquery 这样的库以获取简化示例。

我没有测试过这段代码，但它应该可以工作。如果您有任何问题或者这不能回答您的问题，请告诉我。

很高兴为您提供帮助!