Posting data from ajax to a php script - php

Question

Issue
I have an onclick Jquery function that will return the value in the first cell of the clicked table row. I then try to pass this value using ajax type: 'POST' to a php script that will then execute a database query using this value for comparison. For some reason, $_POST is always empty. The ajax is not returning any errors but i'm unable to receive the value of the array on server-side. Any help is appreciated.
jQuery
$('tr.profileTableClick').click(function() {
var tableData = $(this).find('td:nth-child(1)').map(function() {
return $(this).text();
}).get();
$.ajax({
url: 'selectAnswers.php',
type: 'POST',
data: {
'id': tableData
},
dataType: 'text',
error: function() {
console.log('Error in ajax request');
},
success: function(data) {
console.log('Success of ajax request');
console.log(data);
}
});
PHP
Here is the selectAnswers.php file:
<?php
$id = $_POST['id'][0];
try {
$conn = new PDO(
"mysql:host=$servername;dbname=$dbname",
$username,
$password
);
$conn->setAttribute(
PDO::ATTR_ERRMODE,
PDO::ERRMODE_EXCEPTION
);
$stmt = $conn->prepare(
"SELECT
quality_of_service,
self_improvement,
personal_behavior,
organization_rules_commitment,
team_work,
appearance, work_with_high_responsibility,
loyalty_to_organization,
punctuality_on_work,
office_maintaining, areas_of_improvement,
points_of_weakness,
points_of_strength
FROM appraisals_table
WHERE Apr_Id = :id"
);
$stmt->bindValue(
':id',
$id,
PDO::PARAM_INT
);
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$ans1 = $row['quality_of_service'];
$ans2 = $row['self_improvement'];
$ans3 = $row['personal_behavior'];
$ans4 = $row['organization_rules_commitment'];
$ans5 = $row['team_work'];
$ans6 = $row['appearance'];
$ans7 = $row['work_with_high_responsibility'];
$ans8 = $row['loyalty_to_organization'];
$ans9 = $row['punctuality_on_work'];
$ans10 = $row['office_maintaining'];
$ans11 = $row['areas_of_improvement'];
$ans12 = $row['points_of_weakness'];
$ans13 = $row['points_of_strength'];
}
} catch(PDOException $e) {
echo 'Error: '. $e->getMessage();
}
$conn = null;

Answer 1

Change either js:
var tableData = $(this).find("td:nth-child(1)").text();
or the php:
$id = (int)$_POST['id'][0]

Answer 2

Use the new javascript's FormData API like so. . .
var formdata = new FormData();
formdata.append('id', tableData);
$.ajax({
url: 'selectAnswers.php',
type: 'POST',
data: formdata,
dataType: 'text',
error: function(){
console.log("Error in ajax request");
},
success: function(data) {
console.log("Success of ajax request");
console.log(data);
}
});