How to get Array values from jquery-ajax formData to php - php

Question

I am trying to pass an input field which has its values to be in an array with some other input fields into PHP using jquery-Ajax formData, everything seems to work fine except that I am having problems with successfully passing the array values and I have tried a whole lot which without evident success.
firstly i tried SerialiseArray() method. Here is my code below
<form>
//other input field below...
.
.
.
//this is the code to include my array which is in _categories-list.php
<div class="form-group">
<label for="artist">Select Categories </label>
<?php include('../_categories-list.php') ?>
</div> </form>
var Category = $('#categoriesList').serializeArray();
$.each( Category,function(i,field){
formData.append('categoriesList', field.value + "");
});
$('.msg').text('Uploading in progress...');
ajaxcall = $.ajax({
url: 'page-videoFunc.php',
data: formData,
processData: false,
contentType: false,
type: 'POST',});
This particular method I used only sends one value of the chosen options in the array. example:
//output: let's say the person chooses blues, hip-hop
hip-hop //will be the only value sent
I also tried another method similar
<form>
//other input field below...
.
.
.
//this is the code to include my array which is in _categories-list.php
<div class="form-group">
<label for="artist">Select Categories </label>
<?php include('../_categories-list.php') ?>
</div> </form>
var Category = $('#categoriesList').serializeArray();
formData.append('categoriesList', Category);//note that code changes here from the above method used
$('.msg').text('Uploading in progress...');
ajaxcall = $.ajax({
url: 'page-videoFunc.php',
data: formData,
processData: false,
contentType: false,
type: 'POST',});
This one sends all the values of the array that is chosen but sends but as an object example:
//output
[object object] [object object]
And lastly, I tried this: serialize();
<form>
//other input field below...
.
.
.
//this is the code to include my array which is in _categories-list.php
<div class="form-group">
<label for="artist">Select Categories </label>
<?php include('../_categories-list.php') ?>
</div> </form>
var Category = $('#categoriesList').serialize(); //Note i used just serialize() here
formData.append('categoriesList', Category);
$('.msg').text('Uploading in progress...');
ajaxcall = $.ajax({
url: 'page-videoFunc.php',
data: formData,
processData: false,
contentType: false,
type: 'POST',});
Which partially works and sends all the values but in a format i seem not to get a way to get the values out, example:
//output
categoriesList%5B%5D=blues&categoriesList%5B%5D=hip-hop
I don't know how to get only the values from the query strings in this method so I could put it into the database
Please help me provide a solution to any of the above method I am using, I have worked on this nearly 42 hours and its slowing down my project

Answer 1

call the ajax like.
var Category = $('#categoriesList').serialize();
$.ajax({
url: 'page-videoFunc.php',
type: 'post',
data:{
action:'update_data',
form_data:Category
},
});
In page-videoFunc.php file, parse the form_data using parse_str.
if($_POST['action'] =='update_data'){
parse_str($_POST['form_data'], $my_form_data);
echo "<pre>";
print_r($my_form_data);
}

Answer 2

After using parse_str to cut off added URL to serialized data, to get all values of the array, you should do this:
parse_str($_POST['name'], $output);
$x = $output["name"];
foreach ($x as $key => $value) {
echo $value;
}