javascript - AJAXLocalStorage : Is it possible to pass a JS variable to PHP? - Stack Overflow

admin管理员组

文章数量:1021903

I was wondering, what'd be the best way to store a shopping cart?
I thought about storing products ID's in localstorage/sessionstorage and then use AJAX to retrieve the products from the server.
The only problem is that I don't know how to pass the items from the localstorage to PHP...
I'm guessing it's probably not possible directly, and I thought about a form though I have no idea how to implent it...
The idea is that when a user clicks "Add to cart" the item id and quantity is added to the localstorage, and when a user views his cart, the item details (image, name, price...) are being retreived from the database. I'm probably going to use this tutorial
.php/ressourcer/artikler/loading-and-saving-data-dynamically-using-php-jquery-and-mysql/

I could as well give up on local storage and go with sessions and database but I'd really like to give users that dynamic web experience.

Another possible way I just came up with is to use URLs like file.php?prodid=......, although URLs like this may get way too long.

Thanks in advance!

I was wondering, what'd be the best way to store a shopping cart?
I thought about storing products ID's in localstorage/sessionstorage and then use AJAX to retrieve the products from the server.
The only problem is that I don't know how to pass the items from the localstorage to PHP...
I'm guessing it's probably not possible directly, and I thought about a form though I have no idea how to implent it...
The idea is that when a user clicks "Add to cart" the item id and quantity is added to the localstorage, and when a user views his cart, the item details (image, name, price...) are being retreived from the database. I'm probably going to use this tutorial
http://verido.dk/index.php/ressourcer/artikler/loading-and-saving-data-dynamically-using-php-jquery-and-mysql/

I could as well give up on local storage and go with sessions and database but I'd really like to give users that dynamic web experience.

Another possible way I just came up with is to use URLs like file.php?prodid=......, although URLs like this may get way too long.

Thanks in advance!

• php
• javascript
• jquery
• ajax
• request

Share Improve this question Follow asked Jun 22, 2012 at 20:18 AsafAsaf 2,03577 gold badges3838 silver badges6060 bronze badges 2

• 1 For long request why not use .post ? – kritya Commented Jun 22, 2012 at 20:21
• To expand on what kritya said, you should be able to do exactly what you are describing; you just need to submit an AJAX request to your PHP script using .post that contains the shopping cart contents. Then the response to that request would need to be the item details and whatever else you want to retrieve. – Herohtar Commented Jun 22, 2012 at 20:27

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

'You must remember that Server-Side (PHP) code is read before it converts the code to browser-side code. JavaScript is manipulated browser-side...

So one-dimensionally, you cannot pass JavaScript to PHP.

However...

With Ajax and in your case I suggest JSON you can send JavaScript data to a PHP page and bring the response back to your JavaScript methods. I think this will suit your needs. I can provide a simple example if you want.

//--example below:

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./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./process.php?hello=' + helloVar + '&world=' + worldVar;

   processAjax(queryString, processId, resultId);

}

Now for some 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>

Now for a process.php (NOTE: FOR SECURITY, I STRONGLY SUGGEST YOU DON'T REVEAL A SERVER-SIDE PROCESSING PAGE IN YOUR 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 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!
  }

?>

Important: you should really look into learning some JSON and $_POST requests as they are more secure, faster and you can easily manipulate returned data. I suggest looking at a library like jquery for simplified examples.

I have not tested this code, but it should work.. Let me know if you have questions or this does not answer your question.

Glad to help!

Use AJAX to send data to the server (GET or POST) and store these values in a session variable or cookie on the server

You can use your local/session storage data and populate some hidden inputs, then submit the respective form in an ajax request. To make things cleaner you can use one hidden input and set it's value into a JSON object created from your storage data.

No, javascript runs on the client, php runs on the server.

I was wondering, what'd be the best way to store a shopping cart?
I thought about storing products ID's in localstorage/sessionstorage and then use AJAX to retrieve the products from the server.
The only problem is that I don't know how to pass the items from the localstorage to PHP...
I'm guessing it's probably not possible directly, and I thought about a form though I have no idea how to implent it...
The idea is that when a user clicks "Add to cart" the item id and quantity is added to the localstorage, and when a user views his cart, the item details (image, name, price...) are being retreived from the database. I'm probably going to use this tutorial
.php/ressourcer/artikler/loading-and-saving-data-dynamically-using-php-jquery-and-mysql/

I could as well give up on local storage and go with sessions and database but I'd really like to give users that dynamic web experience.

Another possible way I just came up with is to use URLs like file.php?prodid=......, although URLs like this may get way too long.

Thanks in advance!

I was wondering, what'd be the best way to store a shopping cart?
I thought about storing products ID's in localstorage/sessionstorage and then use AJAX to retrieve the products from the server.
The only problem is that I don't know how to pass the items from the localstorage to PHP...
I'm guessing it's probably not possible directly, and I thought about a form though I have no idea how to implent it...
The idea is that when a user clicks "Add to cart" the item id and quantity is added to the localstorage, and when a user views his cart, the item details (image, name, price...) are being retreived from the database. I'm probably going to use this tutorial
http://verido.dk/index.php/ressourcer/artikler/loading-and-saving-data-dynamically-using-php-jquery-and-mysql/

I could as well give up on local storage and go with sessions and database but I'd really like to give users that dynamic web experience.

Another possible way I just came up with is to use URLs like file.php?prodid=......, although URLs like this may get way too long.

Thanks in advance!

• php
• javascript
• jquery
• ajax
• request

Share Improve this question Follow asked Jun 22, 2012 at 20:18 AsafAsaf 2,03577 gold badges3838 silver badges6060 bronze badges 2

• 1 For long request why not use .post ? – kritya Commented Jun 22, 2012 at 20:21
• To expand on what kritya said, you should be able to do exactly what you are describing; you just need to submit an AJAX request to your PHP script using .post that contains the shopping cart contents. Then the response to that request would need to be the item details and whatever else you want to retrieve. – Herohtar Commented Jun 22, 2012 at 20:27

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

'You must remember that Server-Side (PHP) code is read before it converts the code to browser-side code. JavaScript is manipulated browser-side...

So one-dimensionally, you cannot pass JavaScript to PHP.

However...

With Ajax and in your case I suggest JSON you can send JavaScript data to a PHP page and bring the response back to your JavaScript methods. I think this will suit your needs. I can provide a simple example if you want.

//--example below:

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./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./process.php?hello=' + helloVar + '&world=' + worldVar;

   processAjax(queryString, processId, resultId);

}

Now for some 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>

Now for a process.php (NOTE: FOR SECURITY, I STRONGLY SUGGEST YOU DON'T REVEAL A SERVER-SIDE PROCESSING PAGE IN YOUR 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 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!
  }

?>

Important: you should really look into learning some JSON and $_POST requests as they are more secure, faster and you can easily manipulate returned data. I suggest looking at a library like jquery for simplified examples.

I have not tested this code, but it should work.. Let me know if you have questions or this does not answer your question.

Glad to help!

Use AJAX to send data to the server (GET or POST) and store these values in a session variable or cookie on the server

You can use your local/session storage data and populate some hidden inputs, then submit the respective form in an ajax request. To make things cleaner you can use one hidden input and set it's value into a JSON object created from your storage data.

No, javascript runs on the client, php runs on the server.

本文标签： javascriptAJAXLocalStorageIs it possible to pass a JS variable to PHPStack Overflow