Why does PHP response to AJAX contains <script> aBunchOfJavascriptHere </script>? - php

Question

I'm trying to figure this out from 2 hours with no luck, maybe it's not that technical but I need help!
I've an AJAX script that needs to send a GET request to a php script that's on the same page.
The PHP script terminates like this
if ($success) {
print( $state );
}?>
The Javascript is rightly under the php termination and is this.
<script>
$('table button').click( function() {
var button = $(this);
/* if button inside the table is clicked */
var username = button.parent().parent().children('td').html();
var state = button.html();
/* send GET request */
$.ajax({
type: "GET",
url: 'index.php',
data: 'username='+username+'&state='+state,
success: function(response) {
alert(response);
}
});
});
</script>
What I don't understand is why I get the alert containing this text
inside // this is the state, so it's good
<script> // this is the script, not good
$('table button').click( function() {
var button = $(this);
/* if button inside the table is clicked */
var username = button.parent().parent().children('td').html();
var state = button.html();
/* send GET request */
$.ajax({
type: "GET",
url: 'index.php',
data: 'username='+username+'&state='+state,
success: function(response) {
alert(response);
}
});
});
</script>
I've to manipulate the HTML on success by I'm not able to do that because of the messy response that I get from my php code. I'm not sure if I've to post other code. If you need to know more just ask, I'll reply as soon as possible.

Answer 1

Any characters outside <?php ?> tags are sent back in the response. That's how you get that <script> tag in the first place when you access index.php from the browser.
echo and print are obviously going to also send data.
So I guess you should have that if($success) at the begining of index.php and exit; inside it, after print.
Characters outside <?php ?> tags are sent as part of the response for historical and practical reasons.
In our days having PHP code mixed with HTML is a bad practice (as some people already pointed out in the comments bellow). You either use a templating engine (most people know about Smarty) or use PHP itself as a templating engine.
But "back in the day" PHP started out as just a simple templating engine (no classes, external modules, namespaces, autoloaders, etc.), so mixing HTML with PHP was basically the purpose of this language.
As I said, today we still use PHP as a templating language so mixing PHP (control structures, loops) and HTML works.

Answer 2

A quick, but not recommended fix is to avoid the javascript content on an ajax request
Just demonstrating, how it could be,
if($success) {
print( $state );
}
if(!isset($_GET['ajax_call']))
{ ?>
<script>
$('table button').click( function() {
var button = $(this);
/* if button inside the table is clicked */
var username = button.parent().parent().children('td').html();
var state = button.html();
/* send GET request */
$.ajax({
type: "GET",
url: 'index.php?ajax_call=1',
data: 'username='+username+'&state='+state,
success: function(response) {
alert(response);
}
});
});
</script>
<?php
}?>
.....
and you should note that the new ajax call has an additional variable, ajax_call,
This is a quick fix, for you to move on, but i suggest you to use an MVC framework.