CODEWITHSUNDEEP
javascriptphpsubmitbokeh
Peter Met
Peter Met

Reputation: 113

Send Cookie via JS to PHP

I am trying to send a String within Javascript to my Server. I made it create a cookie and right now I would like it to do stuff (for now: a simple echo). This is my button-function (I am using Bokeh):

const d = s.data;
var clustOut = "Nevermind the real input";




if (numberOfColors.length >= 2) {
		localStorage.setItem("input", clustOut);
		
	document.cookie = ('clustOut=' + clustOut + ';max-age=10368000;' + ';path=/');
	window.location.href = "/php-scripts/post_cluster.php";
	//alert(numberOfColors.length  + "\\n" + clustOut);
	//alert(d["x"] +  d["y"] + d["color"]);


} else {
	alert ("You have to assign the points to at least two clusters!");
}

My PHP-Files should simply echo:

<?php
$clustOut = $_COOKIE['clustOut'];

echo $clustOut;
?>

I am pretty sure that window.location.href = "/php-scripts/post_cluster.php"; might be the wrong command for a submit. What can I do to make my PHP-Script get the Cookie that I just set?

Upvotes: 0

Views: 493

Answers (1)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20944

Sending data with the Fetch API.

The client and server can communicate with each other with the HTTP protocol. Whenever you load a webpage a HTTP request is send to the server and a response is send back to the client. You can make your own requests and talk to the server through the same protocol with the Fetch API.

You send the data to the server and wait for a response to come back. This way you can check what the server received and maybe do something with the response you got back.

let data = {
  clustOut: "Nevermind the real input"
};

fetch('/php-scripts/post_cluster.php', {
  method: 'POST',
  body: JSON.stringify(data)
}).then(response => {
  if (response.status === 200 && response.ok) {
    return response.text();
  }
}).then(message => {
  console.log(message);
});

Sending data with XMLHttpRequest (IE10+)

For browsers that don't support the Fetch API fall back to the older XMLHttpRequest. It does the same thing, but is written differently.

var xhr = new XMLHttpRequest();
xhr.onload = function() {
  if (this.status === 200) {
    console.log(this.responseText);
  }
}
xhr.open('POST', '/php-scripts/post_cluster.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(JSON.stringify(data));

Sending data with the a form.

A more analogue approach would be to use a <form> element with the action attribute pointing towards your PHP script. This will also send a request to the PHP file while reloading the page. However, reading out the response works differently as you need to display the response on the page during rendering to see the outcome.

<form method="POST" action="/php-scripts/post_cluster.php"> 
  <input type="hidden" name="clustOut" value="Nevermind the real input">
  <button type="submit">Send</button>
</form>

Receiving data on server

Because in the examples above we've used the POST method to send our data, we'll need to access the global $_POST variable in PHP to read out the data that has been send. The value that is being returned or echoed will be send back in the response to the client.

<?php

$clust_out = isset( $_POST[ 'clustOut' ] ) ? $_POST[ 'clustOut' ] : '';
return $clust_out . ' has been received';

?>

Upvotes: 1

Related Questions