Send an JS array through Ajax

Question

I've this type of array in JS:

[{
  websitetype: "onepager"
}, {
  layout: "provided"
}, {
  layout_provided: "wireframes"
}, {
  languages: "single"
}, {
  client_name: "dasda"
}, {
  client_email: "asdasd@asdasd.fr"
}, {
  client_conditions: "on"
}, {
  client_newsletter: "on"
}]

How can I send it through Ajax ?

---

What I tried is:

$.ajax({
    type: 'POST',
    url: 'assets/send.php',
    data: {datas},
    success: function(response) { },
});

---

This is what I would like to get in PHP:

[datas] => Array
    (
        [websitetype] => onepager
        [layout] => provided
        [layout_provided] => wireframes
        [languages] => single
        [client_name] => dasda
        [client_email] => asdasd@asdasd.fr
        [client_conditions] => on
        [client_newsletter] => on
    )

What I'm missing here please ?

Thanks.

Answer 1

The first thing you should do is reduce that array into an object matching the format you want

const dataObject = Object.fromEntries(datas.flatMap(o => Object.entries(o)))

This looks like the following

{
  "websitetype": "onepager",
  "layout": "provided",
  "layout_provided": "wireframes",
  "languages": "single",
  "client_name": "dasda",
  "client_email": "asdasd@asdasd.fr",
  "client_conditions": "on",
  "client_newsletter": "on"
}

You then have two options for posting it to PHP

1. Send it as raw JSON

   $.ajax({ method: "POST", url: "assets/send.php", contentType: "application/json", data: JSON.stringify(dataObject), processData: false })

   Then read and parse the JSON in PHP

    $datas = json_decode(file_get_contents("php://input"), true); // example echo $datas["websitetype"]; // "onepager"

2. Alternatively, let jQuery format the data as an associative PHP array

   $.ajax({ method: "POST", url: "assets/send.php", data: { datas: dataObject } })

   This will post an application/x-www-form-urlencoded request body of

   datas%5Bwebsitetype%5D=onepager&datas%5Blayout%5D=provided&datas%5Blayout_provided%5D=wireframes&datas%5Blanguages%5D=single&datas%5Bclient_name%5D=dasda&datas%5Bclient_email%5D=asdasd%40asdasd.fr&datas%5Bclient_conditions%5D=on&datas%5Bclient_newsletter%5D=on

   PHP can read this as an array via $_POST

   print_r($_POST['datas']);

   Results in

   Array ( [websitetype] => onepager [layout] => provided [layout_provided] => wireframes [languages] => single [client_name] => dasda [client_email] => asdasd@asdasd.fr [client_conditions] => on [client_newsletter] => on )

Answer 2

Encode your data string into JSON.

const datas = [{
  websitetype: "onepager"
}, {
  layout: "provided"
}, {
  layout_provided: "wireframes"
}, {
  languages: "single"
}, {
  client_name: "dasda"
}, {
  client_email: "asdasd@asdasd.fr"
}, {
  client_conditions: "on"
}, {
  client_newsletter: "on"
}]
const jsonString = JSON.stringify(datas)

$.ajax({
    type: 'POST',
    url: 'assets/send.php',
    data: { datas: jsonString },
    success: function(response) { },
});

In your PHP:

$data = json_decode(stripslashes($_POST['datas']));

// here i would like use foreach:

foreach($datas as $data){
   echo $data;
}