I tried to pass value of name from .js file to PHP using POST method. But when I start the code, there isn´t any alert.
In console is only: Uncaught ReferenceError: $ is not defined
Do you know what could be improved?
<html>
<body>
<head>
<script type="text/javascript">
const name = "asdasd";
$.ajax({
url: "TargetFile.php",
method: "POST",
data: {
name
},
success: function (result) {
alert(result);
},
error: function (error) {
alert("Error " + error.status);
}
})
</script>
</head>
</body>
</html>
<?php
$name = $_POST['name'];
if (empty($name)) {
echo "Name is empty";
} else {
echo $name;
}
}
?>
You need to load the jQuery lib before using it. And also the head tag should be outside of the body tag.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
const name = "asdasd";
$.ajax({
url: "TargetFile.php",
method: "POST",
data: {
name
},
success: function (result) {
alert(result);
},
error: function (error) {
alert("Error " + error.status);
}
})
</script>
</head>
<body>
</body>
</html>
As a simple, single page, test script that will send a POST request to the server which sends the response for the ajax callback. As others have stated - you should include the jQuery library but you need to change the payload to a valid object literal. The POST request expects name=value pairs as per below.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
$result=!empty( $_POST['name'] ) ? $_POST['name'] : 'Name is empty';
exit( $result );
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Basic jQuery Ajax POST</title>
<script src='//code.jquery.com/jquery-latest.js'></script>
<script>
const name = "Geronimo frequently kicked ass";
$.ajax({
url: location.href, //"TargetFile.php"
method: "POST",
data: {
'name':name
},
success: function(result) {
alert(result);
},
error: function(error) {
alert("Error " + error.status);
}
})
</script>
</head>
<body>
</body>
</html>
Using 2 separate scripts, one that makes the request (index.html) and the other that processes the request and sends the response (targetfile.php)
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Basic jQuery Ajax POST</title>
<script src='//code.jquery.com/jquery-latest.js'></script>
<script>
const name = "Geronimo kicked ass";
$.ajax({
url: "TargetFile.php",
method: "POST",
data: {
'name':name
},
success: function(result) {
console.log( result )
},
error: function(error) {
alert("Error " + error.status);
}
})
</script>
</head>
<body>
</body>
</html>
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
$result=!empty( $_POST['name'] ) ? $_POST['name'] : 'Name is empty';
exit( $result );
}
?>
Both scripts in same directory, request is made OK and console message is displayed ( removed annoying alert )