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

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

Please ask about one problem at a time. If you have problem with php/mysql, then ask about php/mysql. If yo uave a problem with JS/AJAX than ask about this one — Your Common Sense
– Your Common Sense, Commented Apr 25, 2020 at 17:43
@YourCommonSense: My focus is on the Ajax call as I think there is the reason why the data does not reach the PHP page. — keewee279
– keewee279, Commented Apr 25, 2020 at 17:45
parse your json in ajax success var obj = JSON.parse(yourjsonData); it will give you object that you can use like obj[0].vid — Mohsen
– Mohsen, Commented Apr 25, 2020 at 17:58
@mohsen: Thanks a lot. I also think the issue is with the Ajax call. Can you post how my Ajax call should look in this case or what exactly I have to change here in jQuery ? — keewee279
– keewee279, Commented Apr 25, 2020 at 18:00

Mohsen · Accepted Answer · 2020-04-25 18:19:06Z

1

just get your data in php like this:

$postData = file_get_contents("php://input"); 
$transferData = json_decode($postData, true)['transferData'];

answered Apr 25, 2020 at 18:19

Mohsen

1,4221 gold badge17 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

keewee279 Over a year ago

Thank you. So in Ajax do I have to use it like this: data: { transferData: JSON.stringify(transferData) }, dataType: 'json',

Mohsen Over a year ago

no need if your data is json just putt dataType: json

keewee279 Over a year ago

It doesn't work with this solution. My data is created like this: for(var i = 0; i < countCheckboxesChecked; i++) { transferData.push({vId: v[i], rId: r[i]}); }

Mohsen Over a year ago

its ok just show me the var_dump($postData) from my solution

Shakir El Amrani · Accepted Answer · 2020-04-25 18:27:46Z

1

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');
        }
    });
});

answered Apr 25, 2020 at 18:27

Shakir El Amrani

3304 silver badges19 bronze badges

2 Comments

keewee279 Over a year ago

Thanks for this. I don't need the data in the Ajax success as on HTML / JS side I have everything I need. My problem is that the data I pass through Ajax doesn't reach the PHP page. Just adding the data type doesn't fix it for me.

Shakir El Amrani Over a year ago

The traditional HTTP don't know what is the thing you're passed into via the jquery "data", is accept a few content types the default is plain/text, so you must parse your javascript object into a string, there is many ways to do that the common way using JSON.parse() function.

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Related