I'm using AJAX & PHP to create a simple table containing values queried from a MySQL database. This is my first venture into using AJAX and PHP, but so far I've managed to get things working. I realize that practically every thing here could have been done in a far more efficient & better manner, and am open to all pointers and suggestions!
The PHP script I use contains quite a lot of echo
used in order to construct the table.
I was wondering if there is a method which allows me to return the values of a variable (string) from PHP to AJAX , which I can in turn use elsewhere in the code? I've been scouring StackOverflow for an answer, without any results which helped me.
Here are the relevant parts (the last line is the one I would like to return) of my PHP:
translator.php
//Creates the table structure
echo "<table data-toggle='table' class='table table-striped'>";
echo "<tr>";
echo "<th>Name</th>";
echo "<th>Cuisine</th>";
echo "<th>Opening Hours</th>";
echo "<th>Price Range</th>";
echo "<th>Student Discount</th>";
echo "<th>Address</th>";
echo "<th>Telephone</th>";
echo "<th>Website</th>";
echo "</tr>";
// Insert a new row in the table for each restaurant returned
//This is a loop which goes through all the rows resulted from the query
//The loop adds to the table for each go around.
while ($row = mysqli_fetch_array($qry_result)) {
$addressArray[] = $row[rAddress];
echo "<tr>";
echo "<td>" . $row[rName] . "</td>";
echo "<td><b>" . $row[rCuisine] . "</b></td>";
echo "<td>" . $row[rOpeningHours] . "</td>";
echo "<td>" . $row[rPriceRange] . "</td>";
echo "<td>" . $row[rStudentDiscount] . "</td>";
echo "<td>" . $row[rAddress] . "</td>";
echo "<td>" . $row[rTelephone] . "</td>";
echo '<td><a href="' . $row[rWebsite] . '">' . $row[rWebsite] . '</a></td>';
echo "</tr>";
}
//Closes the table.
echo "</table>";
$arrayString = implode("+Göteborg', '", $addressArray);
$mapVariable = "'" . $arrayString . "+Göteborg'";
echo json_encode($mapVariable); //The variable I would like sent back
Here's the AJAX code:
AJAX
var ajaxFunction = function() {
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
/* Creates a function that will receive data sent from the server
and updates the ajaxDiv found in the bottom */
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState == 4) {
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
/* Gets the value from the user and passes it to the server script */
/* At this stage, a few values are not being used and have been commented out */
var rStudentDiscount = ($('input:radio[name=rStudentDiscount]:checked').val());
var rCheckbox = [];
$('.rCuisine:checked').each(function(i, e) {
rCheckbox.push($(this).val());
});
$.ajax({
url: "translator.php",
type: "post",
dataType: "json",
data: {
'rCheckbox[]': rCheckbox.join()
},
success: function(data) {
},
complete: function(data) {
//run function
mapFunction();
}
});
var queryString = "?rStudentDiscount=" + rStudentDiscount + "&rCheckbox=" + rCheckbox;
ajaxRequest.open("GET", "translator.php" + queryString, true);
ajaxRequest.send(null);
}
The success: function(data) { } carries the response that is handed out by the executing server-side response. I have seen your code in translator.php, you are creating an entire html response and then encoding it with Json.
I been developing applications which use Ajax, but I create a JavaScript array and return that to the service. May be you can do the same. You don't require any echo or html response in translator.php (if it's sole purpose is to process data for ajax).
If you remove all the echo and just have the last one
echo json_encode($mapVariable);
You can then use this in the data of success.