HTML sends message to PHP back-end and check the response

Question

I am trying to send data from user end to server end: positionList.html <=> dbUpdate.php
issue seen on the developer console

The data format I am going to send is an array of self-defined Javascript objects. Here's one example: [{"position":"code testing","description":"junior"},{"position":"front end developing","description":"junior"}]. There are two objects in the array above, and each one is a self-defined JS object. The object definition is stated below, it has two properties:

function Entry(inpt1, inpt2) {
    this.position = inpt1;
    this.description = inpt2;
}

And then I used JSON.stringify method (JS array to JSON string) before $.post to the back end. msgPack is the array with two self-defined JS objects in it. From the developer tool, I could see the JSON string looks normal and the data I received back from the server was a JS string. But console.log(data) doesn't show anything and JSON.parse(data) reports an error.

let myJson = JSON.stringify(msgPack);
let url = "dbUpdate.php";
$.post(url, myJson, function(data){
    console.log("getting data back...");
    console.log('type of data is: ' + typeof(data));
    console.log("data: " + data);
    alert(JSON.parse(data));
});

The server side's code is listed below:

<?php 
require_once 'pdo.php';

$data = isset($_POST)? $_POST:'nothing here';

foreach($data as $obj) {
    echo( json_encode($obj['position']));
}
/*
foreach($data as $obj) {
    foreach($obj as $k => $v) {
        echo "json_encode({$k} => {$v})";
    }
}
 */

?>

I tried several ways to extract the data from the front-end, but it seems the data was not recognized. var_dump, print_r didn't help either.

My questions are:

1. Any suggestions regarding the AJAX communication? Is the problem happening at the back-end side? It couldn't get any information from $_POST.
2. How does PHP back-end know there's a message coming and what methods do we developer have to check that Other than isset($_POST)? My concern is the front-end could send multiple data with different contents.

Thanks.

Answer 1

You can directly send array in the post request by setting it to a key positions and access it in backend via same key. Make sure you send json back so the front end also do a parsing.

let myData = { positions: msgPack};
let url = "dbUpdate.php";
$.post(url, myData, function(data){
    console.log("getting data back...");
    console.log('type of data is: ' + typeof(data));
    console.log("data: " + data);
    alert(JSON.parse(data));
});

While in php

<?php 
require_once 'pdo.php';

if(isset($_POST['positions'])){
    echo json_encode($_POST['positions']); die;
}
else{
 $response = [ 'error' => 'No input specified'];
echo json_encode($response); die;
}
?>