Passing JS object (associative array) via Ajax to PHP not working - php

Question

I am trying to pass a JS object (associative array) that I create dynamically to a PHP / MySQLi query.
- When I write the JS object (transferData) to the console it appears as intended (see below).
- When I test the PHP / MySQLi query separately it works too.
- I therefore assume my problem is with the Ajax call that I use to pass the JS object to PHP / MySQLi.
Can someone tell me how the correct Ajax call should look like here (e.g. using JSON etc.) or what I have to change on the PHP / MySQLi side ?
My JS object:
0: {vId: "04567901", rId: "DE-002"}
1: {vId: "04567902", rId: "DE-005"}
2: {vId: "04567903", rId: "DE-007"}
length: 3
__proto__: Array(0)
My jQuery / Ajax:
$('#btnConfirm').click(function() {
$.ajax({
type: 'POST',
url: 'updateIds.php',
data: {
transferData: transferData
},
success: function(result){
$('#modalSuccess').modal('show');
}
});
});
My PHP / mySQLi:
$postData = $_POST;
$transferData = $_POST['transferData'];
$conn = new mysqli($host, $username, $password, $database);
if($conn->connect_error) {
die("Connection Error: " . $conn->connect_error);
}
$stmt = $conn->prepare("UPDATE myTable l SET l.rId = ? WHERE l.vId = ?");
foreach($transferData as $vId => $rId) {
$stmt->bind_param('ss', $rId, $vId);
$stmt->execute();
}
$stmt->close();
$conn->close();
Update:
My focus is on the Ajax call as I think there is the reason why the data does not reach the PHP page.
Many thanks for any help with this,
Tom

Answer 1

just get your data in php like this:
$postData = file_get_contents("php://input");
$transferData = json_decode($postData, true)['transferData'];

Answer 2

When you use the POST request is better to indicate the data type you're expecting from the server-side use "dataType" in your ajax request, and then parse the data to a valid javascript object in your success handler using JSON.parse().
$('#btnConfirm').click(function() {
$.ajax({
type: 'POST',
url: 'updateIds.php',
dataType: 'JSON', // I'm expecting a json response
data: {
transferData: transferData
},
success: function(result){
// parse json
const data = JSON.parse(result);
$('#modalSuccess').modal('show');
}
});
});