Why doesn't this JS & PHP code work? (I am trying to send a value from JS to PHP)
Question
I have a file named sample.php and it has this code in it, whose task is to just POST a variable value from JS to PHP through AJAX. Here's the code :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var ThunkableWebviewerExtension = {
receiveMessage: function(fxn) {
var callbackFunction = function(event) {
if (typeof fxn === 'function') {
fxn(event.data)
}
};
document.addEventListener('message', callbackFunction, false);
window.addEventListener('message', callbackFunction, false);
}
}
</script>
</head>
<body>
<script type="text/javascript">
var value;
ThunkableWebviewerExtension.receiveMessage(function(message) {
value = message; //this is the value I want to send to PHP
});
//sending the value with ajax (POST)
return new Promise((resolve, reject) => {
$.ajax({
url : "./sample.php", //same file
method : "POST",
data: {"data": value},
success : (res) => {
resolve(res)
},
error : (res) => {
reject(res)
}
})
})
</script>
<?php
echo $_POST['data']; //nothing comes here...
?>
</body>
</html>
My only aim is to access the value variable's value (which is in JS side) in PHP. I came to know that this could be done with AJAX, so I tried but it didn't work - the PHP code doesn't echo anything... Where's the problem?
Alternative methods (for accessing a JS variable's value in PHP) are more than welcome. :)
1 answers
solution1
1 2020-10-30 07:24:25
First, in order to run the ajax function, you need jQuery . Then you have to remove the promise from the ajax call because according to the documentation - "The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise"
<!DOCTYPE html>
<html lang="en">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<head>
<script type="text/javascript">
var ThunkableWebviewerExtension = {
receiveMessage: function(fxn) {
var callbackFunction = function(event) {
if (typeof fxn === 'function') {
fxn(event.data)
}
};
document.addEventListener('message', callbackFunction, false);
window.addEventListener('message', callbackFunction, false);
}
}
</script>
</head>
<body>
<script type="text/javascript">
var value ;
ThunkableWebviewerExtension.receiveMessage(function(message) {
value = message; //this is the value I want to send to PHP
});
//sending the value with ajax (POST)
$.ajax({
url : "./sample.php", //same file
method : "POST",
data: {"data": value},
success : (res) => {
console.log(res);
},
error : (res) => {
console.log(res);
}
})
</script>
<?php
echo $_POST['data']; //nothing comes here...
?>
</body>
</html>
If you come up with Undefined Index: data error after adding this solution, you can add a sample value to the value variable in your JS Code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.