i am trying to simply get a variable from javascript to php, but php doesnt receive my variable - instead it receives the whole page-code.
Here is my test-page:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#button").click(function() {
var test = "Hallo Welt";
$.ajax({
url: "ajax.php",
type: "post",
data: {
test: test
},
success: function (response) {
alert(response);
},
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus, errorThrown);
}
});
});
});
</script>
</head>
<body>
<form>
<input type="button" id="button" value="Test" style="width:200x">
</form>
<?php
if(isset($_POST["test"])) {
echo $_POST["test"];
}
?>
</body>
</html>
Does anyone have an hint?
greetings
You do not need to have a separate PHP file that processes the AJAX request, though there would be benefits from doing so. If you had a separate file, let's say called 'data.php', you could set that script up in such a way so that it could process many different requests - each time you call your ajax function the url would be the same ( data.php ) but the parameters sent in the request would change.
The exit statement below is only encountered for POST requests and prevents the remainder of the html being sent back to your javascript callback function.
<?php
/* Intercept the POST request, do whatever processing required and echo a response */
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/* Remove any previous output from our reply */
ob_clean();
/* send the response */
if( isset( $_POST["test"] ) ) echo $_POST["test"];
/* The `exit` statement prevents the rest of the page being sent in response */
exit();
}
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#button").click(function() {
var test = "Hallo Welt";
$.ajax({
url: "ajax.php",
type: "post",
data: {
test: test
},
success: function (response) {
alert(response);
document.getElementById('out').innerHTML=response;
},
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus, errorThrown);
}
});
});
});
</script>
</head>
<body>
<form>
<input type="button" id="button" value="Test" style="width:200x">
<output id='out'></output>
</form>
</body>
</html>
1st its better to use your php code in a separated file
2nd if you want to use it in the same file like you doing here your code should be
3rd use form.on('submit') instead of submit button click
4th don't forget to add (e) and e.preventDefault(); or return false
<?php
if(isset($_POST["test"])) {
echo $_POST["test"];
}else{
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("form").on('submit',function(e) {
e.preventDefault();
var test = "Hallo Welt";
$.ajax({
url: "ajax.php",
type: "post",
data: {
test: test
},
success: function (response) {
alert(response);
},
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus, errorThrown);
}
});
});
});
</script>
</head>
<body>
<form>
<input type="button" id="button" value="Test" style="width:200x">
</form>
</body>
</html>
<?php } ?>
I think you need to use separate php file first of all, then add exit; after php echo line,
<?php
if(isset($_POST["test"])) {
echo $_POST["test"];
exit;
}
?>
check and let me know if anything is missing.
Thanks.